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.
twitter.com/wenbert
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!