Try
$(document).ready(function () {
$('.select_unselect_all').change(function () {
$('.se_unse').prop('checked', this.checked);
});
});
this.checked
tells if the checkbox is checked or not. Return Boolean value.
Question
I have the html like below
<script>
$(document).ready(function(){
$('.select_unselect_all').click(function(){
console.log('hurray>>>');
$('.se_unse').prop('checked', true);
});
});
</script>
<table cellpadding="0" cellspacing="0" border="0" class="stdtable">
<thead>
<tr>
<th><input id="" class="select_unselect_all" type="checkbox"/></th>
<th>product name</th>
</tr>
</thead>
<tbody>
{% for val in values %}
<tr>
<td><input id="" class="se_unse" type="checkbox" /></td>
<td>{{val.name}}</td>
</tr>
{% endfor %}
</tbody>
</table>
So from the above html and jquery code, when we click on checkbox with class select_unselect_all
, all the remaining checkboxes in tbody
block with class se_unse
should be selected(Its working ind with the above jquery code).
So when we again click on the same checkbox with class select_unselect_all
in thead
section all the checked checkboxed should be unchecked
So how to implement this in my above code ?
Solution
Try
$(document).ready(function () {
$('.select_unselect_all').change(function () {
$('.se_unse').prop('checked', this.checked);
});
});
this.checked
tells if the checkbox is checked or not. Return Boolean value.
OTHER TIPS
Try this:
$(function(){
$('.select_unselect_all').click(function(){
$('.se_unse').prop('checked', $(this).prop('checked'));
});
});