Select / Deselect all checkboxes using jQuery

Select / Deselect all checkboxes using jQuery:

http://stackofcodes.in

The HTML Structure is following type::The HTML Structure is following type::
<table> 
<tr> 
<td><input type="checkbox" id="checkbx_selectall" /> Select all</td> </tr> 
<tr> 
<td><input type="checkbox" class="__chckbx_select" value="1"/>Item 1</td> 
</tr> 
<tr> 
<td><input type="checkbox" class="__chckbx_select" value="2"/>Item 2</td> 
</tr> 
<tr> 
<td><input type="checkbox" class="__chckbx_select" value="3"/>Item 3</td> 
</tr>
 <tr> 
<td><input type="checkbox" class="__chckbx_select" value="4"/>Item 4</td> 
</tr>
</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script type="text/javascript"> 
$(document).ready(function(){ 

$("#checkbx_selectall").on('change', function() 
{ 
if(this.checked){             
$('.__chckbx_select').each(function(){                 this.checked=true;             
});         

}else{              

$('.__chckbx_select').each(function(){                 this.checked=false;             
});         
}     

});

    
$('.__chckbx_select').on('change',function(){
         if($('.__chckbx_select:checked').length == $('.__chckbx_select').length){ 
            $('#checkbx_selectall').prop('checked',true); 
        
}else{
             
$('#checkbx_selectall').prop('checked',false);         
}     
}); 
});
</script>

Please follow and like us:
0