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>
Related
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>
I am trying the get all the values of a table row, I am not able get the selected radio button value from each table row. The table is getting generated in dynamic nature so I cant access with a static values. So I tried to extract the values using the below code:
<div class="tbl card px-2 py-2 my-2" id="GCSA3011">
<div class="card-body">
<div id="DataTables_Table_0_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer">
<div class="row">
<div class="col-sm-12">
<table class="table table-bordered table-hover GCSA3011 ptbl dataTable no-footer dtr-inline" id="DataTables_Table_0" role="grid">
<thead>
<tr style="text-align: center;" role="row">
<th class="sorting_disabled" rowspan="1" colspan="1" style="width: 5%;">#</th>
<th class="sorting_disabled" rowspan="1" colspan="1" style="width: 55%;">Question</th>
<th class="sorting_disabled" rowspan="1" colspan="1" style="width: 40%;">Response</th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd">
<td class="dtr-control" tabindex="0">
<label class="lnx-fd" id="LAB1029_6192" tag="LAB1029" fl-type="label">
1
</label>
</td>
<td>
<label class="lnx-fd" id="LAB1030_6192" tag="LAB1030" fl-type="label">
Instructions
</label>
</td>
<td>
<div class="form-check lnx-fd" tag="LAB1031" fl-type="radiogroup" id="LAB1031_6192">
<label class="form-check-label" style="margin-left:20px;display:inline-block;">
<input class="form-check-input rg" type="radio" value="feedback_response" name="feedback_response_6192">Outstanding
</label>
<label class="form-check-label" style="margin-left:20px;display:inline-block;">
<input class="form-check-input rg" type="radio" value="feedback_response" name="feedback_response_6192" checked="">Excellent
</label>
<label class="form-check-label" style="margin-left:20px;display:inline-block;">
<input class="form-check-input rg" type="radio" value="feedback_response" name="feedback_response_6192">Good
</label>
<label class="form-check-label" style="margin-left:20px;display:inline-block;">
<input class="form-check-input rg" type="radio" value="feedback_response" name="feedback_response_6192">Average
</label>
</div>
</td>
</tr>
<tr role="row" class="even">
<td class="dtr-control" tabindex="0">
<label class="lnx-fd" id="LAB1029_4655" tag="LAB1029" fl-type="label">
31
</label>
</td>
<td>
<label class="lnx-fd" id="LAB1030_4655" tag="LAB1030" fl-type="label">
Response
</label>
</td>
<td>
<div class="form-check lnx-fd" tag="LAB1031" fl-type="radiogroup" id="LAB1031_4655">
<label class="form-check-label" style="margin-left:20px;display:inline-block;">
<input class="form-check-input rg" type="radio" value="feedback_response" name="feedback_response_4655">Outstanding
</label>
<label class="form-check-label" style="margin-left:20px;display:inline-block;">
<input class="form-check-input rg" type="radio" value="feedback_response" name="feedback_response_4655" checked="">Excellent
</label>
<label class="form-check-label" style="margin-left:20px;display:inline-block;">
<input class="form-check-input rg" type="radio" value="feedback_response" name="feedback_response_4655">Good
</label>
<label class="form-check-label" style="margin-left:20px;display:inline-block;">
<input class="form-check-input rg" type="radio" value="feedback_response" name="feedback_response_4655">Average
</label>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
$(".tbl").each(function(){
let tgroup_id = $(this).attr("id");
let tgp_err = [],tgp_obj = [];
var itbl = $('.'+tgroup_id).DataTable();
itbl.rows().every(function () {
let comp_arr_g=[];
var d = this.data();
for(var i=0;i<d.length;i++){
var a = $('input[name="'+$(d[i]).attr('id') +'"]:checked');
}
});
});
Using this I am able to get the value of label and input fields but when I trying to get the selected radio it is not working. Please help me to get it solved.
You can check if d[i] attribute(fl-type) value is radiogroup or not if true then you can simply use find(":checked").closest("label").text() to get checked radio value else just use $(d[i]).text() to get other tds values .
Demo Code :
$(".tbl").each(function() {
let tgroup_id = $(this).attr("id");
let tgp_err = [],
tgp_obj = [];
var itbl = $('.' + tgroup_id).DataTable();
itbl.rows().every(function() {
let comp_arr_g = [];
var d = this.data();
for (var i = 0; i < d.length; i++) {
//check if the attr is radiogroup
if ($(d[i]).attr("fl-type") == "radiogroup") {
//get checked radio
var a = $(d[i]).find(":checked").closest("label").text().trim()
console.log(a)
} else {
//just label
console.log($(d[i]).text().trim())
}
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<div class="tbl card px-2 py-2 my-2" id="GCSA3011">
<div class="card-body">
<div id="DataTables_Table_0_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer">
<div class="row">
<div class="col-sm-12">
<table class="table table-bordered table-hover GCSA3011 ptbl dataTable no-footer dtr-inline" id="DataTables_Table_0" role="grid">
<thead>
<tr style="text-align: center;" role="row">
<th class="sorting_disabled" rowspan="1" colspan="1" style="width: 5%;">#</th>
<th class="sorting_disabled" rowspan="1" colspan="1" style="width: 55%;">Question</th>
<th class="sorting_disabled" rowspan="1" colspan="1" style="width: 40%;">Response</th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd">
<td class="dtr-control" tabindex="0">
<label class="lnx-fd" id="LAB1029_6192" tag="LAB1029" fl-type="label">
1
</label>
</td>
<td>
<label class="lnx-fd" id="LAB1030_6192" tag="LAB1030" fl-type="label">
Instructions
</label>
</td>
<td>
<div class="form-check lnx-fd" tag="LAB1031" fl-type="radiogroup" id="LAB1031_6192">
<label class="form-check-label" style="margin-left:20px;display:inline-block;">
<input class="form-check-input rg" type="radio" value="feedback_response" name="feedback_response_6192" checked>Outstanding
</label>
<label class="form-check-label" style="margin-left:20px;display:inline-block;">
<input class="form-check-input rg" type="radio" value="feedback_response" name="feedback_response_6192" >Excellent
</label>
<label class="form-check-label" style="margin-left:20px;display:inline-block;">
<input class="form-check-input rg" type="radio" value="feedback_response" name="feedback_response_6192">Good
</label>
<label class="form-check-label" style="margin-left:20px;display:inline-block;">
<input class="form-check-input rg" type="radio" value="feedback_response" name="feedback_response_6192">Average
</label>
</div>
</td>
</tr>
<tr role="row" class="even">
<td class="dtr-control" tabindex="0">
<label class="lnx-fd" id="LAB1029_4655" tag="LAB1029" fl-type="label">
31
</label>
</td>
<td>
<label class="lnx-fd" id="LAB1030_4655" tag="LAB1030" fl-type="label">
Response
</label>
</td>
<td>
<div class="form-check lnx-fd" tag="LAB1031" fl-type="radiogroup" id="LAB1031_4655">
<label class="form-check-label" style="margin-left:20px;display:inline-block;">
<input class="form-check-input rg" type="radio" value="feedback_response" name="feedback_response_4655">Outstanding
</label>
<label class="form-check-label" style="margin-left:20px;display:inline-block;">
<input class="form-check-input rg" type="radio" value="feedback_response" name="feedback_response_4655" checked="">Excellent
</label>
<label class="form-check-label" style="margin-left:20px;display:inline-block;">
<input class="form-check-input rg" type="radio" value="feedback_response" name="feedback_response_4655">Good
</label>
<label class="form-check-label" style="margin-left:20px;display:inline-block;">
<input class="form-check-input rg" type="radio" value="feedback_response" name="feedback_response_4655">Average
</label>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
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>
I am now struggling with counting number of checkboxes checked in a column.
I am trying to count them and display a total at the bottom.
My html is as follows. There are alot more columns!
<tr>
<th>Public Safety</th>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td></td>
</tr>
<tr>
<th>SSW/MS</th>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td></td>
</tr>
And my jquery so far:
$('#tblRootCauseBody').on('change', 'input[type=checkbox]', function () {
$(" #tblRootCauseBody tr:not(:last-child) td:nth-child("+ (that.closest('td').index() - 1) + ")").each(function () {
$(this).html();
});
});
To get the index of :nth-child()(index starts from 1), you need to add 1 to the value of .index()(starts from 0)
$('#tblRootCauseBody').on('change', 'input[type=checkbox]', function() {
var index = $(this).closest('td').index() + 1,
$checked = $(" #tblRootCauseBody tr:not(:last-child) td:nth-child(" + (index) + ") input:checked");
$('#tblRootCauseBody tr:last-child > :nth-child(' + index + ')').text($checked.length);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody id="tblRootCauseBody">
<tr>
<th>Public Safety</th>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td></td>
</tr>
<tr>
<th>SSW/MS</th>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>