Whenever I click on select-all on top of the table it goes back to the first page. I need to select some rows in the table and export them to a CSV file but when selecting on different pages, when I click on select all it goes back to page 1.
<td class="check_box_data">
<div class="checkbox check-success">
<label class=" mt-checkbox mt-checkbox-outline" for="checkbox_<?php echo $valuep['0'] ;?>">
<input id="checkbox_<?php echo $valuep['0'] ;?>" type="checkbox" name="leads_ids" value="<?php echo $valuep['0'] ;?>" class="select_click">
<span></span>
</label>
<input type="hidden" id="enable_all" name="enable_all" value="1">
<input type="hidden" id="lead_contact_id_<?php echo $valuep['0'] ;?>" name="contact_id" value="<?php echo $valuep['0'] ;?>">
</div>
<span id="custom_controls"></span>
</td>
var table = $('#mytable').DataTable({
'columnDefs': [{
'targets': 0,
'searchable': false,
'orderable': false,
'className': 'checkbox check-success'
}],
'order': [
[1, 'asc']
]
});
I suggest try trigger click all checkbox in the current visible page.
var myTable = $('#mytable').DataTable({
'columnDefs': [{
'targets': 0,
'searchable': false,
'orderable': false,
}],
'order': [
[1, 'asc']
],
});
$(document).on('click', '#select_all', function() {
$('input.select_click', document).each(function() {
$(this).trigger('click');
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap4.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap4.min.js"></script>
<table class="table table-bordered" id="mytable">
<thead>
<th>Select All</th>
<th>Data</th>
</thead>
<tbody>
<tr>
<td class="check_box_data">
<div class="checkbox check-success">
<label class=" mt-checkbox mt-checkbox-outline" for="checkbox_1">
<input id="checkbox_1" type="checkbox" name="leads_ids" value="1" class="select_click">
<span></span>
</label>
</div>
<span id="custom_controls"></span>
</td>
<td>Test Data 1</td>
</tr>
<tr>
<td class="check_box_data">
<div class="checkbox check-success">
<label class=" mt-checkbox mt-checkbox-outline" for="checkbox_1">
<input id="checkbox_2" type="checkbox" name="leads_ids" value="2" class="select_click">
<span></span>
</label>
</div>
<span id="custom_controls"></span>
</td>
<td>Test Data 2</td>
</tr>
<tr>
<td class="check_box_data">
<div class="checkbox check-success">
<label class=" mt-checkbox mt-checkbox-outline" for="checkbox_1">
<input id="checkbox_2" type="checkbox" name="leads_ids" value="2" class="select_click">
<span></span>
</label>
</div>
<span id="custom_controls"></span>
</td>
<td>Test Data 2</td>
</tr>
<tr>
<td class="check_box_data">
<div class="checkbox check-success">
<label class=" mt-checkbox mt-checkbox-outline" for="checkbox_1">
<input id="checkbox_2" type="checkbox" name="leads_ids" value="2" class="select_click">
<span></span>
</label>
</div>
<span id="custom_controls"></span>
</td>
<td>Test Data 2</td>
</tr>
<tr>
<td class="check_box_data">
<div class="checkbox check-success">
<label class=" mt-checkbox mt-checkbox-outline" for="checkbox_1">
<input id="checkbox_2" type="checkbox" name="leads_ids" value="2" class="select_click">
<span></span>
</label>
</div>
<span id="custom_controls"></span>
</td>
<td>Test Data 2</td>
</tr>
<tr>
<td class="check_box_data">
<div class="checkbox check-success">
<label class=" mt-checkbox mt-checkbox-outline" for="checkbox_1">
<input id="checkbox_2" type="checkbox" name="leads_ids" value="2" class="select_click">
<span></span>
</label>
</div>
<span id="custom_controls"></span>
</td>
<td>Test Data 2</td>
</tr>
<tr>
<td class="check_box_data">
<div class="checkbox check-success">
<label class=" mt-checkbox mt-checkbox-outline" for="checkbox_1">
<input id="checkbox_2" type="checkbox" name="leads_ids" value="2" class="select_click">
<span></span>
</label>
</div>
<span id="custom_controls"></span>
</td>
<td>Test Data 2</td>
</tr>
<tr>
<td class="check_box_data">
<div class="checkbox check-success">
<label class=" mt-checkbox mt-checkbox-outline" for="checkbox_1">
<input id="checkbox_2" type="checkbox" name="leads_ids" value="2" class="select_click">
<span></span>
</label>
</div>
<span id="custom_controls"></span>
</td>
<td>Test Data 2</td>
</tr>
<tr>
<td class="check_box_data">
<div class="checkbox check-success">
<label class=" mt-checkbox mt-checkbox-outline" for="checkbox_1">
<input id="checkbox_2" type="checkbox" name="leads_ids" value="2" class="select_click">
<span></span>
</label>
</div>
<span id="custom_controls"></span>
</td>
<td>Test Data 2</td>
</tr>
<tr>
<td class="check_box_data">
<div class="checkbox check-success">
<label class=" mt-checkbox mt-checkbox-outline" for="checkbox_1">
<input id="checkbox_2" type="checkbox" name="leads_ids" value="2" class="select_click">
<span></span>
</label>
</div>
<span id="custom_controls"></span>
</td>
<td>Test Data 2</td>
</tr>
<tr>
<td class="check_box_data">
<div class="checkbox check-success">
<label class=" mt-checkbox mt-checkbox-outline" for="checkbox_1">
<input id="checkbox_2" type="checkbox" name="leads_ids" value="2" class="select_click">
<span></span>
</label>
</div>
<span id="custom_controls"></span>
</td>
<td>Test Data 2</td>
</tr>
<tr>
<td class="check_box_data">
<div class="checkbox check-success">
<label class=" mt-checkbox mt-checkbox-outline" for="checkbox_1">
<input id="checkbox_2" type="checkbox" name="leads_ids" value="2" class="select_click">
<span></span>
</label>
</div>
<span id="custom_controls"></span>
</td>
<td>Test Data 2</td>
</tr>
<tr>
<td class="check_box_data">
<div class="checkbox check-success">
<label class=" mt-checkbox mt-checkbox-outline" for="checkbox_1">
<input id="checkbox_2" type="checkbox" name="leads_ids" value="2" class="select_click">
<span></span>
</label>
</div>
<span id="custom_controls"></span>
</td>
<td>Test Data 2</td>
</tr>
<tr>
<td class="check_box_data">
<div class="checkbox check-success">
<label class=" mt-checkbox mt-checkbox-outline" for="checkbox_1">
<input id="checkbox_2" type="checkbox" name="leads_ids" value="2" class="select_click">
<span></span>
</label>
</div>
<span id="custom_controls"></span>
</td>
<td>Test Data 2</td>
</tr>
<tr>
<td class="check_box_data">
<div class="checkbox check-success">
<label class=" mt-checkbox mt-checkbox-outline" for="checkbox_1">
<input id="checkbox_2" type="checkbox" name="leads_ids" value="2" class="select_click">
<span></span>
</label>
</div>
<span id="custom_controls"></span>
</td>
<td>Test Data 2</td>
</tr>
<tr>
<td class="check_box_data">
<div class="checkbox check-success">
<label class=" mt-checkbox mt-checkbox-outline" for="checkbox_1">
<input id="checkbox_2" type="checkbox" name="leads_ids" value="2" class="select_click">
<span></span>
</label>
</div>
<span id="custom_controls"></span>
</td>
<td>Test Data 2</td>
</tr>
<tr>
<td class="check_box_data">
<div class="checkbox check-success">
<label class=" mt-checkbox mt-checkbox-outline" for="checkbox_1">
<input id="checkbox_2" type="checkbox" name="leads_ids" value="2" class="select_click">
<span></span>
</label>
</div>
<span id="custom_controls"></span>
</td>
<td>Test Data 2</td>
</tr>
<tr>
<td class="check_box_data">
<div class="checkbox check-success">
<label class=" mt-checkbox mt-checkbox-outline" for="checkbox_1">
<input id="checkbox_2" type="checkbox" name="leads_ids" value="2" class="select_click">
<span></span>
</label>
</div>
<span id="custom_controls"></span>
</td>
<td>Test Data 2</td>
</tr>
<tr>
<td class="check_box_data">
<div class="checkbox check-success">
<label class=" mt-checkbox mt-checkbox-outline" for="checkbox_1">
<input id="checkbox_2" type="checkbox" name="leads_ids" value="2" class="select_click">
<span></span>
</label>
</div>
<span id="custom_controls"></span>
</td>
<td>Test Data 2</td>
</tr>
</tbody>
</table>
Related
I have code as:
let aid = 1;
if($("#ar_"+aid+" .radio input:checked").is(':disabled')){
$("#ar_"+aid).closest('.radio input').is(':enabled').attr("checked",true);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="background:#c3c3c3" id="t_1">
<tbody>
<tr class="amenities-row" id="ar_1">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_1" id="am_1" value="1" disabled>
<label for="am_1">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_1" type="checkbox" value="1" checked>
<label for="checkbox_am_1">
</label>
</div>
</td>
<td>
Amenity 1
</td>
</tr>
<tr class="amenities-row" id="ar_2">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_1" id="am_2" value="1" disabled>
<label for="am_2">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_2" type="checkbox" value="1" checked>
<label for="checkbox_am_2">
</label>
</div>
</td>
<td>
Amenity 2
</td>
</tr>
<tr class="amenities-row" id="ar_3">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_1" id="am_3" value="1">
<label for="am_3">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_3" type="checkbox" value="1" checked>
<label for="checkbox_am_3">
</label>
</div>
</td>
<td>
Amenity 3
</td>
</tr>
<tr class="amenities-row" id="ar_4">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_1" id="am_4" value="1" disabled>
<label for="am_4">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_4" type="checkbox" value="1" checked>
<label for="checkbox_am_4">
</label>
</div>
</td>
<td>
Amenity 4
</td>
</tr>
</tbody>
</table>
<table id="t_2">
<tbody>
<tr class="amenities-row" id="ar_5">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_2" id="am_5" value="1">
<label for="am_5">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_5" type="checkbox" value="1" checked>
<label for="checkbox_am_5">
</label>
</div>
</td>
<td>
Amenity 5
</td>
</tr>
<tr class="amenities-row" id="ar_6">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_2" id="am_6" value="1">
<label for="am_6">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_6" type="checkbox" value="1" checked>
<label for="checkbox_am_6">
</label>
</div>
</td>
<td>
Amenity 6
</td>
</tr>
<tr class="amenities-row" id="ar_7">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_2" id="am_7" value="1" disabled>
<label for="am_7">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_7" type="checkbox" value="1" checked>
<label for="checkbox_am_7">
</label>
</div>
</td>
<td>
Amenity 7
</td>
</tr>
<tr class="amenities-row" id="ar_8">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_2" id="am_8" value="1" disabled>
<label for="am_8">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_8" type="checkbox" value="1" checked>
<label for="checkbox_am_8">
</label>
</div>
</td>
<td>
Amenity 8
</td>
</tr>
</tbody>
</table>
<table id="t_3" style="background:lime">
<tbody>
<tr class="amenities-row" id="ar_9">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_3" id="am_9" value="1" disabled>
<label for="am_9">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_9" type="checkbox" value="1" checked>
<label for="checkbox_am_9">
</label>
</div>
</td>
<td>
Amenity 9
</td>
</tr>
<tr class="amenities-row" id="ar_10">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_3" id="am_10" value="1" disabled>
<label for="am_10">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_10" type="checkbox" value="1" checked>
<label for="checkbox_am_10">
</label>
</div>
</td>
<td>
Amenity 10
</td>
</tr>
<tr class="amenities-row" id="ar_11">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_3" id="am_11" value="1" disabled>
<label for="am_11">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_11" type="checkbox" value="1" checked>
<label for="checkbox_am_11">
</label>
</div>
</td>
<td>
Amenity 11
</td>
</tr>
<tr class="amenities-row" id="ar_12">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_3" id="am_12" value="1" disabled>
<label for="am_12">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_12" type="checkbox" value="1" checked>
<label for="checkbox_am_12">
</label>
</div>
</td>
<td>
Amenity 12
</td>
</tr>
</tbody>
</table>
Here, I have lists of radio buttons. So, at first I will have a id, in this case I have considered that id as 1. Now, I want to do the following things:
check if the radio button with id ar_+aid is disabled (already done)
if it is disabled find the next radio button which is not disabled (i.e, radio button with the same name) of this case the third (ar_3) should be is the closest one, however, it shouldn't go to another radio group.
if every radio button is disabled just console the message, that all are disabled. (i.e if I pass id 11, this should throw an error as all 12,9 and 10 are disabled)
How could I achieve it? Let me know if you need anything more.
You can use name attribute of radio buttton to find the input which is not disabled using $("input[name=" + name + "]:not(:disabled):first") which will checked if the radio with name is not disable and get the :first input while searching then you can use .prop('checked', true) to add checked attribute to that radio button.
Demo Code :
let aid = 1;
//get name of radio
var name = $("#ar_" + aid + " .radio input").attr("name");
//check if disable
if ($("#ar_" + aid + " .radio input").is(':disabled')) {
var count = 0;
//get the rado button whch is not disable
$("input[name=" + name + "]:not(:disabled):first").each(function() {
$(this).prop('checked', true) //prop true
count++;
})
if (count == 0) {
console.log("All disable....")
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="background:#c3c3c3" id="t_1">
<tbody>
<tr class="amenities-row" id="ar_1">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_1" id="am_1" value="1" disabled>
<label for="am_1">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_1" type="checkbox" value="1" checked>
<label for="checkbox_am_1">
</label>
</div>
</td>
<td>
Amenity 1
</td>
</tr>
<tr class="amenities-row" id="ar_2">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_1" id="am_2" value="1" disabled>
<label for="am_2">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_2" type="checkbox" value="1" checked>
<label for="checkbox_am_2">
</label>
</div>
</td>
<td>
Amenity 2
</td>
</tr>
<tr class="amenities-row" id="ar_3">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_1" id="am_3" value="1">
<label for="am_3">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_3" type="checkbox" value="1" checked>
<label for="checkbox_am_3">
</label>
</div>
</td>
<td>
Amenity 3
</td>
</tr>
<tr class="amenities-row" id="ar_4">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_1" id="am_4" value="1" disabled>
<label for="am_4">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_4" type="checkbox" value="1" checked>
<label for="checkbox_am_4">
</label>
</div>
</td>
<td>
Amenity 4
</td>
</tr>
</tbody>
</table>
<table id="t_2">
<tbody>
<tr class="amenities-row" id="ar_5">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_2" id="am_5" value="1">
<label for="am_5">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_5" type="checkbox" value="1" checked>
<label for="checkbox_am_5">
</label>
</div>
</td>
<td>
Amenity 5
</td>
</tr>
<tr class="amenities-row" id="ar_6">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_2" id="am_6" value="1">
<label for="am_6">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_6" type="checkbox" value="1" checked>
<label for="checkbox_am_6">
</label>
</div>
</td>
<td>
Amenity 6
</td>
</tr>
<tr class="amenities-row" id="ar_7">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_2" id="am_7" value="1" disabled>
<label for="am_7">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_7" type="checkbox" value="1" checked>
<label for="checkbox_am_7">
</label>
</div>
</td>
<td>
Amenity 7
</td>
</tr>
<tr class="amenities-row" id="ar_8">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_2" id="am_8" value="1" disabled>
<label for="am_8">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_8" type="checkbox" value="1" checked>
<label for="checkbox_am_8">
</label>
</div>
</td>
<td>
Amenity 8
</td>
</tr>
</tbody>
</table>
<table id="t_3" style="background:lime">
<tbody>
<tr class="amenities-row" id="ar_9">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_3" id="am_9" value="1" disabled>
<label for="am_9">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_9" type="checkbox" value="1" checked>
<label for="checkbox_am_9">
</label>
</div>
</td>
<td>
Amenity 9
</td>
</tr>
<tr class="amenities-row" id="ar_10">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_3" id="am_10" value="1" disabled>
<label for="am_10">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_10" type="checkbox" value="1" checked>
<label for="checkbox_am_10">
</label>
</div>
</td>
<td>
Amenity 10
</td>
</tr>
<tr class="amenities-row" id="ar_11">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_3" id="am_11" value="1" disabled>
<label for="am_11">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_11" type="checkbox" value="1" checked>
<label for="checkbox_am_11">
</label>
</div>
</td>
<td>
Amenity 11
</td>
</tr>
<tr class="amenities-row" id="ar_12">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_3" id="am_12" value="1" disabled>
<label for="am_12">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_12" type="checkbox" value="1" checked>
<label for="checkbox_am_12">
</label>
</div>
</td>
<td>
Amenity 12
</td>
</tr>
</tbody>
</table>
I am Using MVC,Bootstrap in my project .I have Submit button to save data .my design consist of bootstrap nav tabs.
Now my problem is when I save data then I want to change my tab.
My flow is as below
I enter data in first tab then click submit button.
2.Ajax call saves data.after ajax call I wrote tab change tag $('.nav-tabs a[href="#Dependent"]').tab('show'); It changes tab successfully.
3.But after completion debugger again controller is executed and ActionResult index gets executed which then returns index view and then page is reloaded. and my tab is again changed to default first tab
So my problem is how to how to keep changed tab after saving and page reload after save state.
below is my index.chtml only tabs
My Information #*data-toggle="tab"*#
Dependent Information
Finalize
<div class="tab-content well">
<div class="tab-pane active " id="info">
<form data-toggle="validate" role="form" id="defaultForm" method="post">
<table class="table">
<tbody>
<tr>
<td class="auto-style4"></td>
<td style="text-align: center" class="auto-style3"></td>
<td class="auto-style6"> </td>
<td class="auto-style7"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td></td>
<td class="text-center">
<label for="FirstName"> First Name</label>
</td>
<td class="text-center">
<label for="MiddleName">Middle Name</label>
</td>
<td class="text-center">
<label for="LastName">Last Name</label>
</td>
<td></td>
<td> </td>
</tr>
<tr>
<td class="text-center">
<label for="Name">Name</label>
</td>
<td>
<input type="text" class="form-control" id="FirstName" placeholder="FirstName" required="required" />
</td>
<td>
<input type="text" class="form-control" id="MiddleName" placeholder="MiddleName" />
</td>
<td>
<input type="text" class="form-control" id="LastName" placeholder="LastName" required="required" />
</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="text-center">
<label for="DOB">Date Of Birth</label>
</td>
<td>
<input type="text" class="form-control" id="DOB" placeholder="MM/DD/YY" required="required" />
</td>
<td>
<label for="Age">Age</label> <input type="text" class="form-control" id="MyAge" placeholder="Age" disabled="disabled" />
</td>
</tr>
<tr>
<td class="text-center">
<label for="Department">Department</label>
</td>
<td>
<div class="dropdown">
<select id="ddDept" class="btn dropdown-toggle"><option></option></select>
</div>
#* <input type="text" class="dropdown" id="Dept" placeholder="Select" />*#
</td>
</tr>
<tr>
<td class="text-center">
<label for="DOJ">Date Of Joining</label>
</td>
<td>
<input type="text" class="form-control" id="DOJ" placeholder="MM/DD/YY" required="required" />
</td>
</tr>
<tr>
<td class="text-center">
<label for="GrossSalary">Gross Salary</label>
</td>
<td>
<input type="text" class="form-control" id="GrossSalary" placeholder="GrossSalary" required="required" />
</td>
</tr>
<tr>
<td class="text-center">
<label for="Tax">Tax</label>
</td>
<td>
<div class="dropdown">
<select id="ddTax" class="btn dropdown-toggle" onchange="calculateNetsal()"><option></option></select>
</div>
#* <input type="text" class="dropdown" id="Dept" placeholder="Select" />*#
</td>
</tr>
<tr>
<td class="text-center">
<label for="NetSalary">Net Salary</label>
</td>
<td>
<input type="text" class="form-control" id="NetSalary" placeholder="NetSalary" disabled="disabled" />
</td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<button type="submit" class="btn btn-sm btn-primary" value="Create" id="btnAdd" onclick="TabChange(); ">Save and Next</button>
<button type="submit" class="btn btn-sm btn-primary" id="btnClear" onclick="clear();" >Clear</button>
</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</form>
</div>
#*DEPENDENT*#
<div class="tab-pane " id="Dependent">
<form id="Dependent" method="post" action="">
<table class="table">
<tbody>
<tr>
<td class="auto-style4"> </td>
<td style="text-align: center" class="auto-style3"></td>
<td class="auto-style6"> </td>
<td class="auto-style7"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td></td>
<td class="text-center">
<label for="Name">Name</label>
</td>
<td class="text-center">
<label for="SDOB">Date Of Birth</label>
</td>
<td class="text-center">
<label for="Age">Age</label>
</td>
<td></td>
<td> </td>
</tr>
<tr>
<td class="text-center">
<label for="Spouse">Spouse</label>
</td>
<td>
<input type="text" class="form-control" id="Name" placeholder="Name" />
</td>
<td>
#* <input id="sdob" type="text" />*#
<input type="text" class="form-control" id="S1DOB" placeholder="MM/DD/YY" />
</td>
<td>
<input type="text" class="form-control" id="SAge" placeholder="Age" disabled="disabled" />
</td>
</tr>
<tr>
<td></td>
<td class="text-center">
<label for="CName">Name</label>
</td>
<td class="text-center">
<label for="CDOB">Date Of Birth</label>
</td>
<td class="text-center">
<label for="Age">Age</label>
</td>
<td>
<label for="Relation">Relation</label>
</td>
</tr>
<tr>
<td class="text-center">
<div class="custom-control custom-checkbox">
<label class="custom-control-label" for="Chck1">Child 1</label>
<input type="checkbox" class="custom-control-input" id="Chck1" value="1" onchange="validationCheck(Chck1); enableTextBox();" onclick=" PopulateDropDownList()" unchecked>
</div>
</td>
<td>
<input type="text" class="form-control" id="CName" placeholder="Name" disabled="disabled" />
</td>
<td>
<input type="text" class="form-control" id="C1DOB" placeholder="MM/DD/YY" disabled="disabled" />
</td>
<td>
<input type="text" class="form-control" id="C1Age" placeholder="Age" disabled="disabled" />
</td>
<td>
<select id="ddlRelation" class="btn dropdown-toggle" disabled><option></option></select>
</td>
</tr>
<tr>
<td class="text-center">
<div class="custom-control custom-checkbox">
<label class="custom-control-label" for="Chck2">Child 2</label>
<input type="checkbox" class="custom-control-input" id="Chck2" onchange="validationCheck(Chck2); enableTextBox();" value="2" onclick=" PopulateDropDownList2()" unchecked>
</div>
</td>
<td>
<input type="text" class="form-control" id="C2Name" placeholder="Name" disabled="disabled" />
</td>
<td>
<input type="text" class="form-control" id="C2DOB" placeholder="MM/DD/YY" disabled="disabled" />
</td>
<td>
<input type="text" class="form-control" id="C2Age" placeholder="Age" disabled="disabled" />
</td>
<td>
<select id="ddlRelation2" class="btn dropdown-toggle" disabled><option></option></select>
#* <input type="text" class="dropdown" id="Dept" placeholder="Select" />*#
</td>
</tr>
<tr>
<td class="text-center">
<div class="custom-control custom-checkbox">
<label class="custom-control-label" for="Chck3">Child 3</label>
<input type="checkbox" class="custom-control-input" id="Chck3" onchange="validationCheck(Chck3); enableTextBox();" value="3" onclick=" PopulateDropDownList3()" unchecked>
</div>
</td>
<td>
<input type="text" class="form-control" id="C3Name" placeholder="Name" disabled="disabled" />
</td>
<td>
<input type="text" class="form-control" id="C3DOB" placeholder="MM/DD/YY" disabled="disabled" />
</td>
<td>
<input type="text" class="form-control" id="C3Age" placeholder="Age" disabled="disabled" />
</td>
<td>
<select id="ddlRelation3" class="btn dropdown-toggle" disabled><option></option></select>
#* <input type="text" class="dropdown" id="Dept" placeholder="Select" />*#
</td>
</tr>
<tr>
<td class="text-center">
<div class="custom-control custom-checkbox">
<label class="custom-control-label" for="Chck4">Child 4</label>
<input type="checkbox" class="custom-control-input" id="Chck4" onchange="validationCheck(Chck4); enableTextBox();" value="4" onclick=" PopulateDropDownList4()" unchecked>
</div>
</td>
<td>
<input type="text" class="form-control" id="C4Name" placeholder="Name" disabled="disabled" />
</td>
<td>
<input type="text" class="form-control" id="C4DOB" placeholder="MM/DD/YY" disabled="disabled" />
</td>
<td>
<input type="text" class="form-control" id="C4Age" placeholder="Age" disabled="disabled" />
</td>
<td>
<select id="ddlRelation4" class="btn dropdown-toggle" disabled><option></option></select>
#* <input type="text" class="dropdown" id="Dept" placeholder="Select" />*#
</td>
</tr>
#* PARENT*#
<tr>
<td></td>
<td class="text-center">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="chkFather" value="Father" OnChange="validationCheck1(chkFather); enableTextBox();" unchecked>
<label class="custom-control-label" for="chkFather">Father</label>
</div>
</td>
<td class="text-center">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="chkMother" value="Mother" OnChange="validationCheck1(chkMother); enableTextBox();" unchecked>
<label class="custom-control-label" for="chkMother">Mother</label>
</div>
</td>
<td class="text-center">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="chkfatherinlaw" value="FatherInLaw" OnChange="validationCheck1(chkfatherinlaw); enableTextBox();" unchecked>
<label class="custom-control-label" for="chkfatherinlaw">Father In Law</label>
</div>
</td>
<td class="text-center">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="chkmotherInLaw" value="MotherInLaw" OnChange="validationCheck1(chkmotherInLaw); enableTextBox();" unchecked>
<label class="custom-control-label" for="chkmotherInLaw">Mother In Law</label>
</div>
</td>
</tr>
<tr>
<td class="text-center">
<label for="Name">Name</label>
</td>
<td>
<input type="text" class="form-control" id="FName" placeholder="Name" />
</td>
<td>
<input type="text" class="form-control" id="MName" placeholder="Name" />
</td>
<td>
<input type="text" class="form-control" id="FInLName" placeholder="Name" />
</td>
<td>
<input type="text" class="form-control" id="MInLName" placeholder="Name" />
</td>
</tr>
<tr>
<td class="text-center">
<label for="DOB">Date Of Birth</label>
</td>
<td>
<input type="text" class="form-control" id="FDOB" placeholder="MM/DD/YY" />
</td>
<td>
<input type="text" class="form-control" id="MDOB" placeholder="MM/DD/YY" />
</td>
<td>
<input type="text" class="form-control" id="FInLDOB" placeholder="MM/DD/YY" />
</td>
<td>
<input type="text" class="form-control" id="MInLDOB" placeholder="MM/DD/YY" />
</td>
</tr>
<tr>
<td class="text-center"></td>
<td>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="FDCh" onchange="loaddropdown(); enableTextBox();" unchecked>
<label class="custom-control-label" for="FDCh">I Dont Know DOB</label>
</div>
</td>
<td>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="MDCh" onchange="loaddropdown2();enableTextBox();" unchecked>
<label class="custom-control-label" for="MDCh">I Dont Know DOB</label>
</div>
</td>
<td>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="FInLDCh" onchange="loaddropdown3(); enableTextBox();" unchecked>
<label class="custom-control-label" for="FInLDCh">I Dont Know DOB</label>
</div>
</td>
<td>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="MInLDCh" onchange="loaddropdown4(); enableTextBox();" unchecked>
<label class="custom-control-label" for="MInLDCh">I Dont Know DOB</label>
</div>
</td>
</tr>
<tr>
<td class="text-center"></td>
<td align="center">
<div class="dropdown">
<select id="ddFAge" class="btn dropdown-toggle"><option></option></select>
</div>
<label for="Age">Age</label>
<input type="text" class="form-control" id="FAge" placeholder="Age" disabled="disabled" />
</td>
<td align="center">
<div class="dropdown">
<select id="ddMAge" class="btn dropdown-toggle"><option></option></select>
</div>
<label for="Age">Age</label>
<input type="text" class="form-control" id="MAge" placeholder="Age" disabled="disabled" />
</td>
<td align="center">
<div class="dropdown">
<select id="ddFInLAge" class="btn dropdown-toggle"><option></option></select>
</div>
<label for="Age">Age</label>
<input type="text" class="form-control" id="FInLAge" placeholder="Age" disabled="disabled" />
</td>
<td align="center">
<div class="dropdown">
<select id="ddMInLAge" class="btn dropdown-toggle"><option></option></select>
</div>
<label for="Age">Age</label>
<input type="text" class="form-control" id="MInLAge" placeholder="Age" disabled="disabled" />
</td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<button type="submit" class="btn btn-sm btn-primary" id="btnAdd1" onclick="TabChange();">Save and Next</button>
</td>
<td>
<button type="submit" class="btn btn-primary" id="btnClear" onclick="clear1();">Clear</button>
</td>
<td></td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$("#btnAdd").click(function () {
debugger;
$.ajax(
{
type: "POST",
url: "/Home/Create11",
data: {FirstName:$("#FirstName").val(), MiddleName:$("#MiddleName").val(),
LastName: $("#LastName").val(),
DOB: $("#DOB").val(),
Age: $("#MyAge").val(),
Department: $("#ddDept").val(),
DOJ: $("#DOJ").val(),
GrossSal:$("#GrossSalary").val(),
Tax: $("#ddTax option:selected").text(),
NetSal: $("#NetSalary").val()
},
async:true,
success: function (data) {
}
});
$('.nav-tabs a[href="#Dependent"]').tab('show');
});
});
</script>
Handle the onsubmit event into the form tag and prevent that:
<form data-toggle="validate" role="form" id="defaultForm" method="post" onsubmit="event.preventDefault();">
In the controller Index method create a optional parameter for the selected tab. Default to tab 0 but when you call from the javascript code set the tab to the one you want.
On the front view, I have:
<div class="single-category-container">
<table>
<thead>
<tr>
<th scope="col">Base</th>
<th scope="col">Select</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
#foreach($data as $cvk => $cvv)
<tr class="am-row">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_{{$ck}}" id="am_{{ $cvv['amenity_id'] }}" value="{{ $cvv['amenity_id'] }}">
<label for="am_{{ $cvv['amenity_id'] }}">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_{{ $cvv['amenity_id'] }}" type="checkbox" checked="checked">
<label for="checkbox_am_{{ $cvv['amenity_id'] }}">
</label>
</div>
</td>
<td>{{ $cvv['amenity_name'] }}</td>
</tr>
#endforeach
</tbody>
</table>
</div>
Here, you can see on the first column that there is radio and on second column there is checkbox. So, my requirements is whenever a radio button is checked, I want all the checkbox to be checked of that single-category-container except the checkbox of the same row where the radio button is checked.
I have tried the following code but with no success:
$('.single-category-container input[type=radio]').change(function() {
$(this).parents('.single-category-container input[type=checkbox]').attr('checked',true);
$(this).parents('tr input[type=checkbox]').attr('checked',false);
});
Note: there are multiple `.single-category-container` that is even this container is in a loop, here I am representing just a element from the loop because it should give the idea.
Try as follows. You need to add find for this.
$('.aprFilterCol input[type=radio]').change(function() {
$(this).parents('.single-category-container').find('input[type="checkbox"]').prop('checked',true);
$(this).parents('tr').find('input[type="checkbox"]').prop('checked',false);
});
The selectors which are used to find the parent are wrong. Instead of trying to find the elements in one go by doing $(this).parents('.single-category-container input[type=checkbox]')', first find the closest parent and then find the matching child elements inside it. Here is the working example
$(document).on('change', '.single-category-container input[type=radio]', function() {
$(this).closest('.single-category-container').find('input[type=checkbox]').prop('checked', true);
$(this).closest('tr').find('input[type=checkbox]').prop('checked', false);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="single-category-container">
<table>
<thead>
<tr>
<th scope="col">Base</th>
<th scope="col">Select</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr class="am-row">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat" id="radio1" value="">
<label for="radio1">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="check1" type="checkbox">
<label for="check1">
</label>
</div>
</td>
<td>Name</td>
</tr>
<tr class="am-row">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat" id="radio2" value="">
<label for="radio2">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="check2" type="checkbox">
<label for="check2">
</label>
</div>
</td>
<td>Name</td>
</tr>
<tr class="am-row">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat" id="radio3" value="">
<label for="radio3">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="check3" type="checkbox">
<label for="check3">
</label>
</div>
</td>
<td>Name</td>
</tr>
<tr class="am-row">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat" id="radio4" value="">
<label for="radio4">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="check4" type="checkbox">
<label for="check4">
</label>
</div>
</td>
<td>Name</td>
</tr>
</tbody>
</table>
</div>
<div id="Page1">
<p><strong><em>(*) 1 ) Page 1 Question 1</em></strong>
</p>
</div>
<br>
<br>
<div id="Checklist1B7">
<table class="c1">
<tr>
<td width="1%"><label class="c1"><input id="QUESTION1A1" name="S1A" type=
"checkbox"></label>
</td>
<td width="15%">
<div class="c2">
<label class="c4" for="QUESTION1A1">Strongly Disagree</label>
</div>
</td>
<td width="1%"><label class="c2"><input id="QUESTION1A2" name="S1B" type=
"checkbox"></label>
</td>
<td width="15%">
<div class="c2">
<label class="c5" for="QUESTION1A2">Disagree</label>
</div>
</td>
<td width="1%"><label class="c3"><input id="QUESTION1A3" name="S1C" type=
"checkbox"></label>
</td>
<td width="15%">
<div class="c2">
<label class="c6" for="QUESTION1A3">Undecided</label>
</div>
</td>
</tr>
<tr>
<td width="1%"><label class="c1"><input id="QUESTION1A4" name="S1D" type=
"checkbox"></label>
</td>
<td width="15%">
<div class="c2">
<label class="c4" for="QUESTION1A4">Agree</label>
</div>
</td>
<td width="1%"><label class="c2"><input id="QUESTION1A5" name="S1E" type=
"checkbox"></label>
</td>
<td width="15%">
<div class="c2">
<label class="c5" for="QUESTION1A5">Strongly Agree</label>
</div>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
$(document).on("click", "input[type=checkbox]", function(e) {
var num_checked = $("input[type=checkbox]:checked").length;
if (num_checked > 2) {
alert("sorry, you have already selected more than max !" );
$(e.target).attr('checked',false);
}
});
</script>
<p><strong><em>2 ) Page 1 Question 2</em></strong>
</p>
<br>
<br>
<div id="Checklist2B7">
<table class="c1">
<tr>
<td width="1%"><label class="c1"><input id="QUESTION2A1" name="S2A" type=
"checkbox"></label>
</td>
<td width="15%">
<div class="c2">
<label class="c4" for="QUESTION2A1">Monday</label>
</div>
</td>
<td width="1%"><label class="c2"><input id="QUESTION2A2" name="S2B" type=
"checkbox"></label>
</td>
<td width="15%">
<div class="c2">
<label class="c5" for="QUESTION2A2">Tuesday</label>
</div>
</td>
<td width="1%"><label class="c3"><input id="QUESTION2A3" name="S2C" type=
"checkbox"></label>
</td>
<td width="15%">
<div class="c2">
<label class="c6" for="QUESTION2A3">Wednesday</label>
</div>
</td>
</tr>
<tr>
<td width="1%"><label class="c1"><input id="QUESTION2A4" name="S2D" type=
"checkbox" value="4"></label>
</td>
<td width="15%">
<div class="c2">
<label class="c4" for="QUESTION2A4">Thursday</label>
</div>
</td>
<td width="1%"><label class="c2"><input id="QUESTION2A5" name="S2E" type=
"checkbox"></label>
</td>
<td width="15%">
<div class="c2">
<label class="c5" for="QUESTION2A5">Friday</label>
</div>
</td>
<td width="1%"><label class="c3"><input id="QUESTION2A6" name="S2F" type=
"checkbox"></label>
</td>
<td width="15%">
<div class="c2">
<label class="c6" for="QUESTION2A6">Saturday</label>
</div>
</td>
</tr>
<tr>
<td width="1%"><label class="c1"><input id="QUESTION2A7" name="S2G" type=
"checkbox" value="7"></label>
</td>
<td width="15%">
<div class="c2">
<label class="c4" for="QUESTION2A7">Sunday</label>
</div>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
$(document).on("click", "input[type=checkbox]", function(e) {
var num_checked = $("input[type=checkbox]:checked").length;
if (num_checked > 4) {
alert("sorry, you have already selected more than max !" );
$(e.target).attr('checked',false);
}
});
</script>
<table class="c2">
<tr>
<td>
<div class="c5">
<label class="c5"><button type="submit"><label class=
"c5">NEXT</label></button></label>
</div>
</td>
</tr>
</table>
<div class="c9">
<label>1</label>
</div>
<p id="demo">
</p>
If more than 2 checkboxes has been checked I want to disable the first question's checkboxes and it's working but my main problem is, If it happens it block to select all of the checkboxes on the same page.But you have to check less than 4 for question two.
if you target input[type=checkbox] then it will point to every check box in the DOM
so i made the name of all checkbox's in each question to be same
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see www.w3.org" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-9" />
<meta http-equiv="content-type" content="text/html; charset=windows-1254" />
<meta http-equiv="content-type" content="text/html; charset=x-mac-turkish" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="screen" href="/styles/_reset.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/styles/main3.css" />
</head>
<body>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<div id="Page1">
<p><strong><em>(*) 1 ) Page 1 Question 1</em></strong></p>
</div>
<br></br>
<br></br>
<div id="Checklist1B7">
<table class="c1">
<tr>
<td width="1%">
<label class="c1">
<input type="checkbox" name="S1" id="QUESTION1A1" />
</label>
</td>
<td width="15%">
<div class="c2">
<label for="QUESTION1A1" class="c4">
Strongly Disagree</label>
</div>
</td>
<td width="1%">
<label class="c2">
<input type="checkbox" name="S1" id="QUESTION1A2" />
</label>
</td>
<td width="15%">
<div class="c2">
<label for="QUESTION1A2" class="c5">
Disagree</label>
</div>
</td>
<td width="1%">
<label class="c3">
<input type="checkbox" name="S1" id="QUESTION1A3" />
</label>
</td>
<td width="15%">
<div class="c2">
<label for="QUESTION1A3" class="c6">
Undecided</label>
</div>
</td>
</tr>
<tr>
<td width="1%">
<label class="c1">
<input type="checkbox" name="S1" id="QUESTION1A4" />
</label>
</td>
<td width="15%">
<div class="c2">
<label for="QUESTION1A4" class="c4">
Agree</label>
</div>
</td>
<td width="1%">
<label class="c2">
<input type="checkbox" name="S1" id="QUESTION1A5" />
</label>
</td>
<td width="15%">
<div class="c2">
<label for="QUESTION1A5" class="c5">
Strongly Agree </label>
</div>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
$(document).on("click", "input[type=checkbox]", function(e) {
var QUS1 = $("input[name=S1]:checked").length;
if (QUS1 > 2) {
alert("sorry, you have already selected more than max !");
$(e.target).attr('checked', false);
}
var QUS2 = $("input[name=S2]:checked").length;
if (QUS2 > 4) {
alert("sorry, you have already selected more than max !");
$(e.target).attr('checked', false);
}
});
</script>
<p><strong><em>2 ) Page 1 Question 2</em></strong></p>
</div>
<br></br>
<br></br>
<div id="Checklist2B7">
<table class="c1">
<tr>
<td width="1%">
<label class="c1">
<input type="checkbox" name="S2" id="QUESTION2A1" />
</label>
</td>
<td width="15%">
<div class="c2">
<label for="QUESTION2A1" class="c4">
Monday</label>
</div>
</td>
<td width="1%">
<label class="c2">
<input type="checkbox" name="S2" id="QUESTION2A2" />
</label>
</td>
<td width="15%">
<div class="c2">
<label for="QUESTION2A2" class="c5">
Tuesday</label>
</div>
</td>
<td width="1%">
<label class="c3">
<input type="checkbox" name="S2" id="QUESTION2A3" />
</label>
</td>
<td width="15%">
<div class="c2">
<label for="QUESTION2A3" class="c6">
Wednesday</label>
</div>
</td>
</tr>
<tr>
<td width="1%">
<label class="c1">
<input type="checkbox" name="S2" value="4" id="QUESTION2A4" />
</label>
</td>
<td width="15%">
<div class="c2">
<label for="QUESTION2A4" class="c4">
Thursday</label>
</div>
</td>
<td width="1%">
<label class="c2">
<input type="checkbox" name="S2" id="QUESTION2A5" />
</label>
</td>
<td width="15%">
<div class="c2">
<label for="QUESTION2A5" class="c5">
Friday</label>
</div>
</td>
<td width="1%">
<label class="c3">
<input type="checkbox" name="S2" id="QUESTION2A6" />
</label>
</td>
<td width="15%">
<div class="c2">
<label for="QUESTION2A6" class="c6">
Saturday</label>
</div>
</td>
</tr>
<tr>
<td width="1%">
<label class="c1">
<input type="checkbox" name="S2" value="7" id="QUESTION2A7" />
</label>
</td>
<td width="15%">
<div class="c2">
<label for="QUESTION2A7" class="c4">
Sunday</label>
</div>
</td>
</tr>
</table>
</div>
<table class="c2">
<tr>
<td>
<div class="c5">
<label class="c5">
<button type="submit">NEXT
</button>
</label>
</div>
</td>
</tr>
</table>
<div class="c9">
<label>1</label>
</div>
</form>
<p id="demo"></p>
</div>
</form>
</body>
</html>
I'm trying to change some pricing tables according the option provided by the user.
For example, if he chooses 36 Months and Monthly, it will show a div (display: block;) and for the other options, 6 in total.
I was trying to follow this answer here but it will not work.. Any advise please? My goal it's to make a function that onChange/onClick it will show the divs, only after the 2 options selected.
<table width="100%">
<tbody>
<tr>
<td>Laufzeit:</td>
<td align="center"><label>
<input type="radio" name="laufzeit" value="24-m" id="laufzeit_0" checked>
24 Months</label>
</td>
<td align="center"><label>
<input type="radio" name="laufzeit" value="36-m" id="laufzeit_1">
36 Months</label>
</td>
<td align="center"><label>
<input type="radio" name="laufzeit" value="48-m" id="laufzeit_2">
48 Months</label>
</td>
</tr>
<tr>
<td>Abrechnung:</td>
<td align="center"><label>
<input type="radio" name="abrechnung" value="monthly" id="abrechnung_0" checked>
Monthly</label>
</td>
<td align="center"><label>
<input type="radio" name="abrechnung" value="yearly" id="abrechnung_1">
Yearly</label>
</td>
<td align="center"></td>
</tr>
</tbody>
<div class="filter-24-m">24 m</div>
<div class="filter-24-y">24 y</div>
<div class="filter-36-m">36 m</div>
<div class="filter-36-y">36 y</div>
<div class="filter-48-m">48 m</div>
<div class="filter-48-y">48 y</div>
Thank you so much!
You can have similar code for other radiobuttons also
$("#laufzeit_0").change(function(){
if($(this).is(":checked")){
if($("#abrechnung_0").is(":checked")){
$("div.YOUR_DIV_CLASS").show();
}
}
});
You can do it with one function. The divs are shown only after the 2 options selected.
Try something like this :
$(document).ready(function() {
$('input[name=abrechnung]').change(function() {
var laufzeit = $('input[name=laufzeit]:checked').val();
if(laufzeit.length > 0) {
var abrechnung = $('input[name=abrechnung]:checked').val();
$('.content').hide();
$('.' + laufzeit + '-' + abrechnung).show();
}
});
$('input[name=laufzeit]').change(function() {
$('input[name=abrechnung]').prop('checked', false);
$('.content').hide();
});
});
.content {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table width="100%">
<tbody>
<tr>
<td>Laufzeit:</td>
<td align="center"><label>
<input type="radio" name="laufzeit" value="24-m" id="laufzeit_0" checked>
24 Months</label>
</td>
<td align="center"><label>
<input type="radio" name="laufzeit" value="36-m" id="laufzeit_1">
36 Months</label>
</td>
<td align="center"><label>
<input type="radio" name="laufzeit" value="48-m" id="laufzeit_2">
48 Months</label>
</td>
</tr>
<tr>
<td>Abrechnung:</td>
<td align="center"><label>
<input type="radio" name="abrechnung" value="monthly" id="abrechnung_0" checked>
Monthly</label>
</td>
<td align="center"><label>
<input type="radio" name="abrechnung" value="yearly" id="abrechnung_1">
Yearly</label>
</td>
<td align="center"></td>
</tr>
</tbody>
</table>
<div class="content 24-m-monthly" style="display:block">24-m monthly</div>
<div class="content 36-m-monthly">36-m monthly</div>
<div class="content 48-m-monthly">48-m monthly</div>
<div class="content 24-m-yearly">24-m yearly</div>
<div class="content 36-m-yearly">36-m yearly</div>
<div class="content 48-m-yearly">48-m yearly</div>
I'd do it by giving the radio's classes and check for any change in the class like so:
<input type="radio" name="laufzeit" class="laufzeit" value="24-m" id="laufzeit_0">
24 Months</label>
Then you can check for any changes to show and hide the respective divs.
var laufzeit;
var abrechnung;
$(".laufzeit").change(function(){
laufzeit = $(this).attr('value');
if(abrechnung == ""){return}
else{
$('.show').hide();
$('.'+abrechnung + '-' + laufzeit).show();
$('.'+abrechnung + '-' + laufzeit).addClass('show');
}
});
$(".abrechnung").change(function(){
abrechnung = $(this).attr('value');
if(laufzeit == ""){return}
else{
$('.show').hide();
$('.'+abrechnung + '-' + laufzeit).show();
$('.'+abrechnung + '-' + laufzeit).addClass('show');
}
});
With the rest looking like so:
<table width="100%">
<tbody>
<tr>
<td>Laufzeit:</td>
<td align="center"><label>
<input type="radio" name="laufzeit" class="laufzeit" value="24-m" id="laufzeit_0">
24 Months</label>
</td>
<td align="center"><label>
<input type="radio" name="laufzeit" class="laufzeit" value="36-m" id="laufzeit_1">
36 Months</label>
</td>
<td align="center"><label>
<input type="radio" name="laufzeit" class="laufzeit" value="48-m" id="laufzeit_2">
48 Months</label>
</td>
</tr>
<tr >
<td>Abrechnung:</td>
<td align="center"><label>
<input type="radio" name="abrechnung" class="abrechnung" value="monthly" id="abrechnung_0">
Monthly</label>
</td>
<td align="center"><label>
<input type="radio" name="abrechnung" class="abrechnung" value="yearly" id="abrechnung_1">
Yearly</label>
</td>
<td align="center"></td>
</tr>
</tbody>
</table>
<div class="content 24-m-monthly show">24-m monthly</div>
<div class="content 36-m-monthly">36-m monthly</div>
<div class="content 48-m-monthly">48-m monthly</div>
<div class="content 24-m-yearly">24-m yearly</div>
<div class="content 36-m-yearly">36-m yearly</div>
<div class="content 48-m-yearly">48-m yearly</div>