PinoyTech.org

CodeIgniter, Kohana, Mootools, jQuery and CSS

Check One Check All Using jQuery

Posted by teejay on November 25, 2009

an image of a table with checkboxes

Today, we will be writing a jQuery Example of our Check One Check All functionality using Mootools

This is a simple script if you are a jQuery 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 jQuery Javascript

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$('document').ready(function(){
 $('#checker').click(function(){
  console.log('you clicked!!');
  if ($(this).is(':checked'))
  {
   console.log('we are all checked!!');
   $('.sel_checkbox').attr('checked', true);
  }
  else
  {
   console.log('we all un-checked!!');
   $('.sel_checkbox').attr('checked', false);  
  }
 });
});
</script>

Demo

Now View the jQuery version of Check All Check None demo.

Related Article

Categories: How To, Web Development

Tags: javascript, mootools, usability

2 Comments

brayan

This should work too

$('#checker').click(function(){
 $('.sel_checkbox').attr('checked', $(this).is(':checked') );
});

:D

November 26th 2009

Thorpe Obazee

@brayan. Thanks for the tip.

November 27th 2009

Comments