Check and Clear all checkbox

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
merlin6b
Forum Newbie
Posts: 4
Joined: Tue Aug 15, 2006 2:49 pm

Check and Clear all checkbox

Post by merlin6b »

I have two JavaScript function

Code: Select all

function checkAll() {
     var boxes = document.getElementsByTagName('input');
 
     for (i = 0; i < boxes.length; i++) {
          if (boxes[i].type == 'checkbox')
                boxes[i].checked = true;
                document.getElementById('check_'+ boxes[i].value).style.background = '#FFFFCC';
     }
}

function clearAll() {
     var boxes = document.getElementsByTagName('input'); 

     for (i = 0; i < boxes.length; i++) {
          if (boxes[i].type == 'checkbox')
                boxes[i].checked = false;
                document.getElementById('check_'+ boxes[i].value).style.background = '';
     }
}
The first function check all checkbox on page and the second function clear all selected checkbox.

Now I call the functions with following buttons:

Code: Select all

<input type="button" name="CheckAll" value="Check all" onClick="checkAll(document.myform.list)">
<input type="button" name="ClearAll" value="Clear all" onClick="clearAll(document.myform.list)">
I want to remove this buttons because I need more space on page, and I want to put a checkbox. When checkbox selected I want to call function "checkall" when not selected call "clearAll"

Something like:

Code: Select all

<input type="checkbox" name="checkall" onclick="checkAll(document.myform.list)" />';
But my example select all checkbox and not clear all when checkbox not checked.

What I need to do to solve this problem ?
I don't have much knowledge with JavaScript.

Thanks!
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

Code: Select all

if(this.checked) unCheckAll(); else checkAll();
merlin6b
Forum Newbie
Posts: 4
Joined: Tue Aug 15, 2006 2:49 pm

Post by merlin6b »

Sorry for stupid question but Where I need to put this ?
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

The onclick event of your "new" checkbox.
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post by nickvd »

Lately I've been using jQuery for my javascript coding, it's making things very very easy. The code and html for what you are looking for, when using would be:

Code: Select all

<script type="text/javascript">
   $(document).ready(function(){ //the dom is ready to be manipulated
      
      $('#checkall').change(function(){ //event for onChange
         var x = this.checked; //the state of the 'checkall' checkbox
         
         /* jquery's css selector for all input tags with type of checkbox within 
         * the element with the id checkallform (the form.. duh ;)
         * but not (the chaining ability of jquery) the elemnent 
         * with an id of checkall.
         */
         $('#checkallform input[@type="checkbox"]').not('#checkall').each(function() {
            // set .each() element's checked value to the value of the 'checkall' checkbox
            this.checked = x;
         });
      });
   });
</script>

Code: Select all

<form id='checkallform'>
<input type="checkbox" id='checkall'/> -- Check All
<?php for ($i=1;$i<=50;$i++)echo "<input type='checkbox' id='foo$i' name='foo$i'/> - Foo #$i<br/>"; ?>
</form>
aside from the first line, which deals with the window.onload problems, the meat of it is

Code: Select all

      $('#checkall').change(function(){
         var x = this.checked;
         $('#checkallform input[@type="checkbox"]').not('#checkall').each(function() {
            this.checked = x;
         });
      });
I'd highly recommend taking a look at jquery it can make your javascript life much easier :)
merlin6b
Forum Newbie
Posts: 4
Joined: Tue Aug 15, 2006 2:49 pm

Post by merlin6b »

feyd & nickvd thank you very much for help!

feyd your example work for me :

Code: Select all

if(this.checked) unCheckAll(); else checkAll();
but I have an issue. Please see my page: http://img209.imageshack.us/img209/5291/checkboxfx5.png

When I put the checkbox on top, the "Check all" and "Clear all" functions not work.
When I put the checkbox on bottom the "Check all" and "Clear all" functions work.

This is my code:

Code: Select all

print "\n" . '<form name="myform" action="readmsg.php" method="post">';
print '<table width="785" border="0">
<tr>

<td bgcolor="#99CCFF" width="16"><input type="checkbox" name="checkall" onclick="if(this.checked) checkAll(); else clearAll();" /></td>';

print ($_GET['foldername'] == 'sent') ? '<td bgcolor="#99CCFF" width="200">Sent To</td>' : '<td bgcolor="#99CCFF" width="200">From</td>';
print '<td bgcolor="#99CCFF" width="401">Subiect</td>
       <td bgcolor="#99CCFF" width="140">Date</td>
       </tr>';

while ($row = mysql_fetch_array($data)) {
print "<tr id=\"check_{$row['id']}\">
       <td><input type=\"checkbox\" name=\"list[]\" value=\"{$row['id']}\" onClick=\"highlight(this,'check_{$row['id']}')\" /></td>";
I think "Check all" and "Clear all" not work because I call the JavaScript functions before PHP set the checkbox ID's:

Code: Select all

while ($row = mysql_fetch_array($data)) {
print "<tr id=\"check_{$row['id']}\">
       <td><input type=\"checkbox\" name=\"list[]\" value=\"{$row['id']}\" onClick=\"highlight(this,'check_{$row['id']}')\" /></td>";
When I put the checkbox after this code everything work fine but my checkbox not on top.

Any idea to solve this problem ?

Thanks !
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

I believe the problem has to do with the blanketing nature of the javascript functions you've built.
Post Reply