Legendary_Hunter Legendary_Hunter - 1 month ago 13
HTML Question

Jquery ui tab. select all check box working only in one tab

I have created multiple tabs which contain one table each. Each row of the table has a checkbox and there is a check box on heading of each table which when checked selects all check-boxes in a particular table. Now this checkbox is working for first tab but when I switch tabs the other select all check-boxes are not working. All have the same id so I think one jquer function would be enough. Below is the structure of tab and table inside it

Same happens with email button only first tab email works



$('#all').change(function() {
if ($(this).prop('checked')) {
$('tbody tr td input[type="checkbox"]').each(function() {
$(this).prop('checked', true);
});
} else {
$('tbody tr td input[type="checkbox"]').each(function() {
$(this).prop('checked', false);
});
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="nav nav-tabs">
<li class="active">
<a href="#profile" data-toggle="tab">
<span class="glyphicon glyphicon-info-sign"></span> EN
</a>
</li>
<li>
<a href="#tab-emp-name" data-toggle="tab">
<span class="glyphicon glyphicon-home"></span> EN
</a>
</li>
</ul>

<div class="tab-content">
<div class="tab-pane active" id="profile">
<div class="clearfix" style="margin: 10px 0;">
<a href="https://mail.xxxx.com" class="btn btn-warning" id="email">
<span class="glyphicon glyphicon-envelope"></span> Email
</a>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>
<span class="label label-danger">Select All</span>
&nbsp;&nbsp;
<input type='checkbox' name='check_all' id='all'>
</th>
<th></th>
<th>Number</th>
<th>Name</th>
<th>Gender</th>
<th>Date of Birth</th>
<th>Email</th>
</tr>
</thead>
<tbody id="tbody-emps"></tbody>
</table>
</div>
<div class="tab-pane" id="tab-emp-name">
<div class="clearfix" style="margin: 10px 0;">
<a href="https://mail.xxx.com" class="btn btn-warning" id="email">
<span class="glyphicon glyphicon-envelope"></span> Email
</a>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>
<span class="label label-danger">Select All</span>
&nbsp;&nbsp;
<input type='checkbox' name='check_all' id='all'>
</th>
<th></th>
<th>Number</th>
<th>Name</th>
<th>Gender</th>
<th>Date of Birth</th>
<th>Email</th>
</tr>
</thead>
<tbody id="tbody-emp-name"></tbody>
</table>
</div>
</div>




Answer

ids must be unique, change it to a class or use a different selector

$('th input[type="checkbox"]').change(function() {
    if ($(this).prop('checked')) {
        $(this).closest('table').find('input[type="checkbox"]').prop('checked', true);
    } else {
        $(this).closest('table').find('input[type="checkbox"]').prop('checked', false);

    }
});