A web developer's blog. PHP, MySQL, CakePHP, Zend Framework, Wordpress, Code Igniter, Django, Python, CSS, Javascript, jQuery, Knockout.js, and other web development topics.

jQuery Javascript Tutorial: Check All / Uncheck All Checkboxes

This is using jQuery’s toggle() function.

First you have to include jquery.js in the head of your html. (duh)

<script language="javascript" src="js/jquery.js"></script>

Then in your body, you will probably have something like this:

<img id="checkallboxes" src="img/check_all_boxes.gif" alt="" />
<input id="target_item[]" class="checkbox1" name="target_item[]" type="checkbox" value="myval01" /> My Value 01
<input id="target_item[]" class="checkbox1" name="target_item[]" type="checkbox" value="myval02" /> My Value 02
<input id="target_item[]" class="checkbox1" name="target_item[]" type="checkbox" value="myval03" /> My Value 03
<input id="target_item[]" class="checkbox1" name="target_item[]" type="checkbox" value="myval04" /> My Value 04
<input id="target_item[]" class="checkbox1" name="target_item[]" type="checkbox" value="myval05" /> My Value 05 
 
<!-- This is the jQuery part. It will check all boxes with classname that is equal to checkbox1 -->
<script type="text/javascript"><!--
$(document).ready(function(){
    $(".checkallboxes").toggle(                    //this is the gif file id
    function() {
        $('.checkbox1').attr('checked','checked'); //add the atrribute checked
    },
    function () {
        $('.checkbox1').removeAttr("checked");     //remove the attribute checked
    });
});
--></script>

That’s about it.

This entry was posted in Uncategorized. Bookmark the permalink.

One Response to jQuery Javascript Tutorial: Check All / Uncheck All Checkboxes

  1. Hi, that was a helpful blog post! Lots of very good information, I am excited that I seen it.

    I am going to save your web page! :-)

Leave a Reply to Pure Logic Solutions Cancel reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>