Frontendplace Blog

Sharing Frontend developing ideas

«
»

Example select All checkbox with prototype

Posted by info on July 30th, 2011

Here is an example how to program a checkbox that controls multiple other checkboxes. And when one checkbox gets unchecked this box also reset itself to represent the overall setting of the boxes.

Here is the code example.

First load the prototype lib :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>

Then add these line.. I Hope they will explain themselves

Event.observe(window, 'load', function() {
	var select_all_boxes = $$('.checkbox_group');
	
	select_all_boxes.each(function(el) {
		
		var checkboxes = el.select('input[type="checkbox"]:enabled');
		var select_all_box = checkboxes.shift(); // throw out select all box
		select_all_box.observe('click', function() {
			checkboxes.each(function(e) {
				e.checked = select_all_box.checked;
			});
		});
		select_all_box.checkYourBoxes = function(){
			var allSelected = true;
			checkboxes.each(function(e) {
				if(e.checked == false){
					allSelected=false;
					throw $break;
				}
			});
			this.checked = allSelected;
		}
		checkboxes.each(function(e) {
			e.observe('click', function(e) {
				select_all_box.checkYourBoxes();
			});
		});
	});
});

 

This entry was posted on Saturday, July 30th, 2011 at 1:36 am and is filed under Scripting. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

«
»