How to implement “select all” check boxes using Jquery

HTML Code

<input id="checkbox-1" style="display: block;" name="checkbox-1" type="checkbox" />
<input id="checkbox-2" style="display: block;" name="checkbox-2" type="checkbox" />
<input id="checkbox-3" style="display: block;" name="checkbox-3" type="checkbox" />

<!-- select all boxes -->
<input id="select-all" style="display: block;" name="select-all" type="checkbox" />

Jquery Code:

<script>
	// Listen for click on toggle checkbox
$('#select-all').click(function(event) {   
    if(this.checked) {
        // Iterate each checkbox
        $(':checkbox').each(function() {
            this.checked = true;                        
        });
    }
	
	else {
    $(':checkbox').each(function() {
          this.checked = false;
      });
  }
});
	</script>

Leave a Reply

Your email address will not be published. Required fields are marked *