Check One Check All Using Mootools

Posted by teejay on November 24, 2009

Imagine going through a 25 item per page application and you need to check them all. Wouldn't it be a good thing if you have the functionality of a check one/check all for checking all those checkboxes? If yes, you would agree that this should be on every appropriate web application.

This is a simple script if you are a Mootools user for having that "check one check all" functionality

The HTML

<form action="/code/check_one_check_all_using_mootools" method="post" id="registration_form">
<table class="tableborder">
 <tr>
  <th><input type="checkbox" name="checker" id="checker" /></td>
  <th>Field</td>
 </tr>
 <tr>
  <td><input type="checkbox" name="checker" class="sel_checkbox" /></td>
  <td>Peter Parker</td>

 </tr>
 <tr>
  <td><input type="checkbox" name="fields[]" class="sel_checkbox" /></td>
  <td>Eric Magnus</td>
 </tr>
 <tr>
  <td><input type="checkbox" name="fields[]" class="sel_checkbox" /></td>
  <td>James Howlett</td>

 </tr>
 <tr>
  <td><input type="checkbox" name="fields[]" class="sel_checkbox" /></td>
  <td>Emma Frost</td>
 </tr>
 <tr>
  <td><input type="checkbox" name="fields[]" class="sel_checkbox" /></td>
  <td>Wanda Maximoff</td>

 </tr>
 <tr>
  <td><input type="checkbox" name="fields[]" class="sel_checkbox" /></td>
  <td>Sebastian Shaw</td>
 </tr>
 <tr>
  <td><input type="checkbox" name="fields[]" class="sel_checkbox" /></td>
  <td>Scott Summers</td>

 </tr>
</table>
</form>

The Mootools Javascript

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
 document.id('checker').addEvent('click', function(){
  if (document.id('checker').get('checked') == true)
  {
   $$('.sel_checkbox').set('checked', true);
  }
  else
  {
   $$('.sel_checkbox').set('checked', false);  
  }
 });
});
</script>

Demo

Simple, wasn't it? Now View the Check All Check None demo for this script.

Related Article

Check One Check All Using jQuery - If you're a jQuery user, you'd be interested in the jQuery version of this script.

Categories: How To, Web Development

Tags: javascript, mootools, usability

3 Comments

Cherry

Thank you for creating this tutorial. Mootools is a nice framework.

November 24th 2009

Caul

Thank you. This was very useful to me.

November 29th 2009

Bezerik

Hello, I think that actually your demo-online is not working propertly. I tested with firefox 3.5.7!

Have a nice day.

February 1st 2010

PinoyTech.org