I have a check/uncheck all checkboxes script which is meant for two
buttons.  I want to apply this code to a checkbox, so that the user
can toggle the select/all option.  For example, the user checks the
selectall checkbox, and all the checkboxes are selected.  If the user
unchecks the selectall checkbox, all the checkboxes are unselected. 
The code must check for checkboxes, as the name field for the
checkboxes are dynamic.  Currently, the code selects all checkboxes,
but does not deselect them.
Here is the code.

function checkAll(obj)
{
// set the form to look at (your form is called form1)
var frm = document.form1
// get the form elements
var el = frm.elements
// loop through the elements...
for(i=0;i<el.length;i++) {
  // and check if it is a checkbox
  if(el[i].type == "checkbox" ) {
    // if it is a checkbox and you submitted yes to the function
    if(obj == "yes")
      // tick the box
      el[i].checked = true;
    else
      // otherwise untick the box
      el[i].checked = false;
    }
  }
}

<input type="checkbox" name="checkbox" value="checkbox"
onClick="checkAll('yes');return true;">

---

Request for Question Clarification by palitoy-ga on 16 Feb 2006 01:18 PST

Hello again,

The uncheck code for your button should be:

<input type="checkbox" name="checkbox" value="checkbox"
onClick="checkAll('no');return true;">

Does this not work?

---

Clarification of Question by flyguylol-ga on 16 Feb 2006 21:14 PST

Hello Palitoy-ga,

Thanks for noticing me.  The function works well, but I later realized
I need a "check/uncheck" all checkbox that will toggle between "check
all" and "uncheck all".  The way the code is set up currently, you
need two buttons (or two checkboxes) to acheive this.  I'd use the
script posted below, but it checks the "name" field of the checkbox. 
Because of the way you set up the previous code (which works great, by
the way), the checkboxes must be selected by type, which my code does
not do.  I'm not sure this will help, but here is the snippet I use:

function checkAll(checkname, exby) {
  for (i = 0; i < checkname.length; i++)
  checkname[i].checked = exby.checked? true:false
}

 <input type="checkbox" name="all"
onClick="checkAll(document.mylist.checkGroup,this)">Check/Uncheck All


Thanks again for responding.

Hello again and it is nice to see you using Google Answers again!

I think I have a solution for you, it may not be the prettiest
solution but it does work.

This is how I approached it... my first thoughts were how does the
check/uncheck all button know what to do?

The only solution I could see to this problem is it has to check each
of the checkboxes and see if they are checked or not.

If they are all checked then the button will uncheck them all, if they
are all unchecked the button will check them all.

The only drawback to this solution is that if the user has checked one
of the boxes the button will not be able to determine what to do and I
can see no way around this by using this strategy.  What this means is
the user will have to click the button twice.  If the user has checked
any of the boxes, the script will uncheck them all, then when the user
clicks the button again all the boxes will become checked.

This should be clearer with the example.  Try manually checking all
the boxes, manually unchecking all the boxes and just checking one (or
not all) of the boxes and you should see what I mean.

Here is the new function:

function checkAll()
{
  // set the form to look at (your form is called form1)
  var frm = document.form1
  // get the form elements
  var el = frm.elements
  // a variation to store whether any boxes are checked
  var testit = false;
  // loop through the elements...
  for(i=0;i<el.length;i++) {
    // check if the element is a checkbox and whether it is checked
    if (el[i].type == "checkbox" && el[i].checked == true) {
      // we have found a checked box so remember this!
      testit = true;
    }
  }
  // loop through the elements again...
  for(i=0;i<el.length;i++) {
    // and check if it is a checkbox
    if(el[i].type == "checkbox" ) {
      // if it is a checkbox and we have found a checked box
      if(testit == true) {
        // tick the box
        el[i].checked = false; }
      else {
        // otherwise untick the box
        el[i].checked = true; }
    }
  }
}

The code for the button would now become:

<input type=button value="(Un)Check All" onClick="checkAll();return false;">

Please let me know if you require any further clarification.

Again, thank-you Palitoy-ga, you're the best!

Hi

use this code....


<HTML>
<script language=javascript>
function checkAll(obj)
{

var ss
var kk
kk= obj;

ss=document.form1.checkbox.checked;

if (ss == false)
{
	kk ="no";
	
}

// set the form to look at (your form is called form1)
var frm = document.form1
// get the form elements
var el = frm.elements
// loop through the elements...
for(i=0;i<el.length;i++) {
  // and check if it is a checkbox
  if(el[i].type == "checkbox" ) {
    // if it is a checkbox and you submitted yes to the function
    //alert(kk);
    if(kk == "yes")
      // tick the box
      el[i].checked = true;
    else
      // otherwise untick the box
      el[i].checked = false;
    }
  }
}
</script>

<body>
<form name=form1>

<input type="checkbox" name="checkbox" value="checkbox"
onClick="checkAll('yes');return true;">

<input type="checkbox" name="checkbox1" value="checkbox">

<input type="checkbox" name="checkbox2" value="checkbox">

<input type="checkbox" name="checkbox3" value="checkbox">

</form>
</body>
</HTML>

thanks
bala

Thanks for the 5-star rating, kind comments and tip!  They are all appreciated.