Simple JQuery check-all

17Jun09

Simple check all with Jquery:

function checkAll(el, fieldName){
	var checkBoxes = $('input[name=' + fieldName + ']');
	var curValue = el.value;
	if(curValue == 'Check All'){
		$.each(checkBoxes, function() {this.checked = true});
		el.value = 'Uncheck All';
	} else {
		$.each(checkBoxes, function() {this.checked = false});
		el.value = 'Check All';
	}
}

How to use?
Pass in the “this” keyword as the first parameter. Second, pass in the name of the fields that contain the checkboxes. This works only if you set your check all button’s value to ‘Check All’ (ways around this of course).

What’s going on?
Jquery gets all of the elements on the page that are input and have the name attribute equal to the name you passed in. The if conditional checks to see if the value of the first parameter is equal to ‘Check All’. If it is, we iterate over each checkbox and set it to true. We then change the value to ‘uncheck all’. If the value of the first parameter is equal to ‘uncheck all’ we set each checkbox to false, and reset the value to ‘check all’.

Filed under: Beginner, Javascript, Jquery   |  Leave a Comment