SitePoint.com

Mondego · Dec 22, 2006, 12:02

i need help building a link that when clicked, will either check all (if one or more checkboxes is unchecked) or uncheck all, except i only want it to work for the checkboxes that share a variable name (as attributed to the input tag). i'm trying to make it using only one function.

i've checked all over these forums and google and every script dealt only with checking/unchecking all checkboxes for the "entire form" regardless of the name of the <input /> tag, and most are activated with a button, which won't work for my design.

this is all i have so far:

Code:

function checkAll(myform, myfield) {
	for (i = 0; i < myform.myfield.length; i++)
		myform.myfield[i].checked = true;
	
}

function unCheckAll(myform, myfield) {
	for (i = 0; i < myform.myfield.length; i++)
		myform.myfield[i].checked = false;
}

Code:

<form method="post" action="index.php" name="sql">

...

<a href="#" onClick="checkAll(myform, field);">[√]</a>

<input class="nobox" type="checkbox" name="users[]" value="users_id" />

the brackets in the name have to be there because php requires them. i have 2 functions but want to combine them into one. i have multiple sets of checkboxes and each one will require it's own check/uncheck hyperlink.

can you help me understand where i'm failing?

thanks in advance,
-Mondego

logitron · Dec 22, 2006, 15:42

Code:

<script type="text/javascript">
  function checkAll(inputName)
  {
    var elementInput = document.getElementsByTagName('input')
    var unchecked = 0
		
    for (var h = 0; h < elementInput.length; h++)
    {
      if (elementInput[h].getAttribute('type') == 'checkbox' && elementInput[h].getAttribute('name') == inputName)
      {
	  if (elementInput[h].checked == false)
	  {
	    unchecked = 1
	  }
      }
    }

    for (var i = 0; i < elementInput.length; i++)
    {
      if (elementInput[i].getAttribute('type') == 'checkbox' && elementInput[i].getAttribute('name') == inputName)
      {
        if (unchecked == 1)
        {
          elementInput[i].checked = true
        }
        else
        {
          elementInput[i].checked = false
        }
      }
    }
  }
</script>

This function takes two parameters. The first parameter, inputName, would take the value of the name attribute of input element for all checkboxes that you either want to check or uncheck. The second parameter, checked, would take on a boolean value of either 1 or 0 (1: check all; 0: uncheck all). Would this solve your problem? I've tested it, and it seems to work within your defined parameters. I hope it helps you. :P

MikeFoster · Dec 23, 2006, 06:03

Hi Mondego, welcome to SPF!

I had a similar demo also:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Check/Uncheck All</title>
<script type='text/javascript'>
window.onload = function()
{
  initCheckBehavior(
    ['cb1CA', 'cb1UA', 'form1', 'cb1[]'],
    ['cb2CA', 'cb2UA', 'form1', 'cb2[]'],
    ['cb3CA', 'cb3UA', 'form2', 'cb3[]'],
    ['cb4CA', 'cb4UA', 'form2', 'cb4[]']
  );
}
/*
  Each argument is an array with items as follows:
  [sCheckAllAnchorId, sUncheckAllAnchorId, sFormName, sCheckboxName]
*/
function initCheckBehavior()
{
  var i, ca, ua;
  for (i = 0; i < arguments.length; ++i) {
    a = document.getElementById(arguments[i][0]); // check all
    if (a) {
      a.onclick = doCheckBehavior;
      a._CBFORM_ = arguments[i][2];
      a._CBNAME_ = arguments[i][3];
      a._CBCHECKED_ = true;
    }
    a = document.getElementById(arguments[i][1]); // uncheck all
    if (a) {
      a.onclick = doCheckBehavior;
      a._CBFORM_ = arguments[i][2];
      a._CBNAME_ = arguments[i][3];
      a._CBCHECKED_ = false;
    }
  }
}
function doCheckBehavior()
{
  var cb = document.forms[this._CBFORM_].elements[this._CBNAME_];
  for (i = 0; i < cb.length; i++) {
    cb[i].checked = this._CBCHECKED_;
  }
  return false;
}
</script>
</head>
<body>

<form action='#' method='post' name='form1'>
<p><input type='checkbox' name='cb1[]' value='cb1 1'> cb1 1</p>
<p><input type='checkbox' name='cb1[]' value='cb1 2'> cb1 2</p>
<p><input type='checkbox' name='cb1[]' value='cb1 3'> cb1 3</p>
<p><a id='cb1CA' href=''>Check All</a> | <a id='cb1UA' href=''>Uncheck All</a></p>
<hr>
<p><input type='checkbox' name='cb2[]' value='cb2 1'> cb2 1</p>
<p><input type='checkbox' name='cb2[]' value='cb2 2'> cb2 2</p>
<p><input type='checkbox' name='cb2[]' value='cb2 3'> cb2 3</p>
<p><a id='cb2CA' href=''>Check All</a> | <a id='cb2UA' href=''>Uncheck All</a></p>
<hr>
</form>

<form action='#' method='post' name='form2'>
<p><input type='checkbox' name='cb3[]' value='cb3 1'> cb3 1</p>
<p><input type='checkbox' name='cb3[]' value='cb3 2'> cb3 2</p>
<p><input type='checkbox' name='cb3[]' value='cb3 3'> cb3 3</p>
<p><a id='cb3CA' href=''>Check All</a> | <a id='cb3UA' href=''>Uncheck All</a></p>
<hr>
<p><input type='checkbox' name='cb4[]' value='cb4 1'> cb4 1</p>
<p><input type='checkbox' name='cb4[]' value='cb4 2'> cb4 2</p>
<p><input type='checkbox' name='cb4[]' value='cb4 3'> cb4 3</p>
<p><a id='cb4CA' href=''>Check All</a> | <a id='cb4UA' href=''>Uncheck All</a></p>
<hr>
</form>

</body>
</html>

Mondego · Dec 25, 2006, 05:55

wow thank you both for you input.

i think i forgot to mention that the names of the input tags won't be pre-known, nor the number of them; they will be generated by the script. i will definitely try these out as soon as i get back from vacation.

thanks again!
-mondego

Mondego · Dec 27, 2006, 10:22

logitron,

i'm trying different ways of creating the hyperlink and i keep getting js errors. can you type out how the html link is supposed to look?

here's what i have:

Code:

<a id="users" href="#" onClick="checkAll(users);">[√]</a>

...

<input type="checkbox" name="users[]" value="users_id" />

thanks,
-mondego

MikeFoster · Dec 28, 2006, 10:09

Quote:

Originally Posted by Mondego

...i think i forgot to mention that the names of the input tags won't be pre-known...

Yes, that changes things.

Let's back up and take another look at this.

You need some script which checks/unchecks all checkboxes with the same name. There will be two 'A' elements to 'check all' and 'uncheck all' for each group of checkboxes with the same 'name'. This may be the key to your solution. Each 'A' element can be associated with a checkbox 'name'. One way to do this is to embed the checkbox 'name' in one of the 'A' element's attributes (id, name, class, etc.). For example, look at the code I posted above. The 'A' elements have their associated checkbox 'name' embedded in their 'id' attribute.

Before we go any further, tell us whether or not you can change the PHP code so it will embed the checkbox 'name' in the corresponding 'A' elements.

MikeFoster · Dec 28, 2006, 11:17

It was pretty easy to change my previous demo to illustrate the idea in my last post. Try it online and the code follows.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Check/Uncheck All</title>
<script type='text/javascript'>
window.onload = function()
{
  initCheckBehavior();
}
function initCheckBehavior()
{
  var i, a;

  for (i = 0; i < document.links.length; ++i) {
    a = document.links[i];
    if (a.id.indexOf('UncheckAll_') != -1) {
      a.onclick = doCheckBehavior;
      a._CBNAME_ = a.id.substr(11) + '[]';
      a._CBCHECKED_ = false;
    }
    else if (a.id.indexOf('CheckAll_') != -1) {
      a.onclick = doCheckBehavior;
      a._CBNAME_ = a.id.substr(9) + '[]';
      a._CBCHECKED_ = true;
    }
  }
}
function doCheckBehavior()
{
  var i, cb = document.getElementsByName(this._CBNAME_);
  for (i = 0; i < cb.length; ++i) {
    cb[i].checked = this._CBCHECKED_;
  }
  return false;
}
</script>
</head>
<body>

<form action='#' method='post' name='form1'>
<p><input type='checkbox' name='cb1[]' value='cb1 1'> cb1 1</p>
<p><input type='checkbox' name='cb1[]' value='cb1 2'> cb1 2</p>
<p><input type='checkbox' name='cb1[]' value='cb1 3'> cb1 3</p>
<p><a id='CheckAll_cb1' href=''>Check All</a> | <a id='UncheckAll_cb1' href=''>Uncheck All</a></p>
<hr>
<p><input type='checkbox' name='cb2[]' value='cb2 1'> cb2 1</p>
<p><input type='checkbox' name='cb2[]' value='cb2 2'> cb2 2</p>
<p><input type='checkbox' name='cb2[]' value='cb2 3'> cb2 3</p>
<p><a id='CheckAll_cb2' href=''>Check All</a> | <a id='UncheckAll_cb2' href=''>Uncheck All</a></p>
<hr>
</form>

<form action='#' method='post' name='form2'>
<p><input type='checkbox' name='cb3[]' value='cb3 1'> cb3 1</p>
<p><input type='checkbox' name='cb3[]' value='cb3 2'> cb3 2</p>
<p><input type='checkbox' name='cb3[]' value='cb3 3'> cb3 3</p>
<p><a id='CheckAll_cb3' href=''>Check All</a> | <a id='UncheckAll_cb3' href=''>Uncheck All</a></p>
<hr>
<p><input type='checkbox' name='cb4[]' value='cb4 1'> cb4 1</p>
<p><input type='checkbox' name='cb4[]' value='cb4 2'> cb4 2</p>
<p><input type='checkbox' name='cb4[]' value='cb4 3'> cb4 3</p>
<p><a id='CheckAll_cb4' href=''>Check All</a> | <a id='UncheckAll_cb4' href=''>Uncheck All</a></p>
<hr>
</form>

</body>
</html>

Mondego · Dec 28, 2006, 11:48

thanks for the reply mike,

there's actually only going to be one <a> tag controlling both checkAll and uncheckAll. if at least one checkbox is unchecked, clicking it will checkAll, otherwise, it will uncheckAll. (if the code for this is too complex to warrant it be written we can skip it.)

also, please correct me if i'm wrong; i put the id="users" in the <a> element already. is this what you mean by naming it? (php requires a "[]" after the 'name' in the input element. will this affect the script any?)

i'm writing the php myself so everything can be changed there (i just don't know jack about js)

thanks,
-mondego

[edit] i just noticed you replied again with new code. let me try that out now

Dec 22, 2006, 12:02	#1
Mondego SitePoint Member Join Date: Dec 2006 Posts: 4	building checkall/uncheckall link i need help building a link that when clicked, will either check all (if one or more checkboxes is unchecked) or uncheck all, except i only want it to work for the checkboxes that share a variable name (as attributed to the input tag). i'm trying to make it using only one function. i've checked all over these forums and google and every script dealt only with checking/unchecking all checkboxes for the "entire form" regardless of the name of the <input /> tag, and most are activated with a button, which won't work for my design. this is all i have so far: Code: function checkAll(myform, myfield) { for (i = 0; i < myform.myfield.length; i++) myform.myfield[i].checked = true; } function unCheckAll(myform, myfield) { for (i = 0; i < myform.myfield.length; i++) myform.myfield[i].checked = false; } Code: <form method="post" action="index.php" name="sql"> ... <a href="#" onClick="checkAll(myform, field);">[√]</a> <input class="nobox" type="checkbox" name="users[]" value="users_id" /> the brackets in the name have to be there because php requires them. i have 2 functions but want to combine them into one. i have multiple sets of checkboxes and each one will require it's own check/uncheck hyperlink. can you help me understand where i'm failing? thanks in advance, -Mondego

Dec 27, 2006, 10:22	#5
Mondego SitePoint Member Join Date: Dec 2006 Posts: 4	logitron, i'm trying different ways of creating the hyperlink and i keep getting js errors. can you type out how the html link is supposed to look? here's what i have: Code: <a id="users" href="#" onClick="checkAll(users);">[√]</a> ... <input type="checkbox" name="users[]" value="users_id" /> thanks, -mondego Last edited by Mondego; Dec 27, 2006 at 11:21..

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Dec 25, 2006, 05:55	#4
Mondego SitePoint Member Join Date: Dec 2006 Posts: 4	wow thank you both for you input. i think i forgot to mention that the names of the input tags won't be pre-known, nor the number of them; they will be generated by the script. i will definitely try these out as soon as i get back from vacation. thanks again! -mondego

Dec 28, 2006, 11:48	#8
Mondego SitePoint Member Join Date: Dec 2006 Posts: 4	thanks for the reply mike, there's actually only going to be one <a> tag controlling both checkAll and uncheckAll. if at least one checkbox is unchecked, clicking it will checkAll, otherwise, it will uncheckAll. (if the code for this is too complex to warrant it be written we can skip it.) also, please correct me if i'm wrong; i put the id="users" in the <a> element already. is this what you mean by naming it? (php requires a "[]" after the 'name' in the input element. will this affect the script any?) i'm writing the php myself so everything can be changed there (i just don't know jack about js) thanks, -mondego [edit] i just noticed you replied again with new code. let me try that out now