Easiest way to select all checkbox in javascript / jquery

This simple snippet can be used to select all checkbox. Both jquery and javascript method given, choose whatever suits to you.

This function takes checkbox name and selecting checkbox object as parameter. Based on selecting checkbox checked status, it will select/unselect other checkboxes.

This example code selects / unselects all checkboxes in javascript / jquery.

Example Code:

<html>
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script type='text/javascript'>
function select_all(chk_name,trigger){
  
	var action=(trigger.checked==true ? true : false);
	
  //Javascript method
	var checkBoxes = document.getElementsByName(chk_name);
	for (i = 0; i < checkBoxes.length; i++){
		checkBoxes[i].checked=action;
	 
  }
  
  
  //Jquery way
  var action=(trigger.checked==true ? true : false);
  $('input[type="checkbox"]').each( function(){
    if($(this).attr('name')=='numbers')
      this.checked=action;
      
  });
  
}

</script>

<div style='width:100px;height:100px;border:1px solid red;padding:5px;'>
<input type='checkbox' name='trigger' id='trigger' onchange='select_all("numbers",this)' />Select All<br>
<input type='checkbox' name='numbers'  />First<br>
<input type='checkbox' name='numbers'  />Second<br>
<input type='checkbox' name='numbers'  />Third<br>
</div>
</html>

Sample Output:

Easiest way to select all checkbox in javascript / jquery

Comments (0)

Leave a Comment