Clicky

Fellow Experts: Please see the code snippet at line 33.

The effect I want to achieve is that all elements of the "abox" array in the form named "checkForm" are checked or unchecked when the "all" box is checked or unchecked.  Please note that there is another form on the page with a checkbox named "abox" - that should be left alone; the action should be restricted to the form named "checkForm."

If you click on "ALL" the checkboxes in the "abox" array should show they are checked.  If you click again to deselect, they should show unchecked.

If you click on "ALL" and "Go" in the second form, the expected output would look like this:

YOU SUBMITTED ARRAYS
array(3) {
  ["all"]=>
  string(2) "on"
  ["abox"]=>
  array(3) {
    [1]=>
    string(2) "on"
    [X]=>
    string(2) "on"
    [3]=>
    string(2) "on"
  }
  ["submit"]=>
  array(1) {
    ["ARRAYS"]=>
    string(2) "go"
  }
}

Thanks and regards,
~Ray
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
<?php // RAY_temp_checkbox_mouseover.php
error_reporting(E_ALL);
echo "<pre>" . PHP_EOL;


if (!empty($_POST["submit"]))
{
    // WHICH FORM WAS SUBMITTED?
    echo "YOU SUBMITTED " . key($_POST["submit"]);
    echo PHP_EOL;
    var_dump($_POST);
}
?>

<html>
<body>


GROUP 1 DUPLICATE NAMES - NOT ARRAYS
<form method="post">
<input name=abox  type="checkbox"> 0
<input name=abox1 type="checkbox"> 1
<input name=abox2 type="checkbox"> 2
<input name=abox3 type="checkbox"> 3
<input type="submit" name="submit[SINGLETON]"  value="go" />
</form>


<br />
GROUP 2 (ARRAY) - SINGLE CLICK OR SELECT / DESELECT ALL
<script language="JavaScript">
function toggle(formName, masterName, arrayName) {
/* WHAT GOES HERE */
}
</script>
<form method="post" name="checkForm">
<input name="all"   type="checkbox" onClick="toggle('checkForm', 'all', 'abox')">ALL
<input name=abox[1] type="checkbox"> 1
<input name=abox[X] type="checkbox"> 2
<input name=abox[3] type="checkbox"> 3
<input type="submit" name="submit[ARRAYS]"  value="go" />
</form>

</body>
</html>

asked 10/07/2010 10:23

Ray_Paseur's gravatar image

Ray_Paseur ♦♦


12 Answers:
//code to go at line 33
var field = getElementById( "abox" );
if ( getElementById( "all" ).checked )
{
   for (i = 0; i < field.length; i++)
   {
      field[i].checked = true ;
   }
}
else
{
   for (i = 0; i < field.length; i++)
   {
      field[i].checked = false ;
   }
}

//a utility method
function getElementById(id)
{
   return document.getElementById(id);
}
link
gurvinder372's gravatar image

gurvinder372

here is an example checkbox that will check/uncheck all the boxes in the same form as it is which names begin with abox

beware this code assumes you do not have other non-checkbox elements in the same form

<input type="checkbox" onclick="javascript:for(i=0;i<this.form.elements.length;i++)if(this.form.elements[i].name.substr(0,4)=='abox')this.form.elements[i].checked=this.checked;" />

---

if you need more complicated stuff, consider using jquery
i'll post the code if you wish
link
skullnobrains's gravatar image

skullnobrains

sorry gurvinder372, your post was not there when i reached this page
your solution is as good as mine
link
skullnobrains's gravatar image

skullnobrains

@skullnobrains: no problem at all.
Keep it up :)
link
gurvinder372's gravatar image

gurvinder372

@gurvinder372: Thanks for your post.  Please see line 32 of my original code snippet.  How do I pass the form name, master checkbox name and array name into your sample?  Best regards, ~Ray
link
Ray_Paseur's gravatar image

Ray_Paseur

Here's one I made earlier.

It has a top checkbox to select / de-select all which also ignores the current check state of any boxes, so if a box is checked and you click select all, all boxes will be selected.

here's the form:

<form name="cbtesta" style="margin: 0;"><input name="head" class="chkbox" type="checkbox" onclick="countCheckboxes(window.document.cbtest1);" /></form>
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
<script type="text/javascript">

function countCheckboxes(f){

	for ( var i=0;i<f.elements.length;i++ ){

		if (window.document.cbtesta.head.checked == false ) {

			if  (f.elements[i].checked==true ){
			f.elements[i].checked=false;
			}
		}
		else if (window.document.cbtesta.head.checked == true ) {
			if  (f.elements[i].checked==false ){
			f.elements[i].checked=true;
			}
		}
	}
}

function checkTheBox(a)
{
	if ( window.document.cbtest1[a].checked == false ) {
	window.document.cbtest1[a].checked=true;
	}
	else if ( window.document.cbtest1[a].checked == true ) {
	window.document.cbtest1[a].checked=false;
	}
}

function DontCheckTheBox(a)
{
	if ( window.document.cbtest1[a].checked == true ) {
	window.document.cbtest1[a].checked=false;
	}
	else if ( window.document.cbtest1[a].checked == false ) {
	window.document.cbtest1[a].checked=true;
	}
}

function checkTheHead(a,f)
{
	if ( window.document.cbtesta[a].checked == false ) {
	window.document.cbtesta[a].checked=true;

		for ( var i=0;i<f.elements.length;i++ ){

			if  (f.elements[i].checked==false ){
			f.elements[i].checked=true;
			}
		}
	}

	else if ( window.document.cbtesta[a].checked == true ) {
	window.document.cbtesta[a].checked=false;

		for ( var i=0;i<f.elements.length;i++ ){

			if  (f.elements[i].checked==true ){
			f.elements[i].checked=false;
			}
		}
	}
}

</script>


<ul>

						<div class="clearfix"><li class="inner-box-2"><form name="cbtesta" style="margin: 0;"><input name="head" class="chkbox" type="checkbox" onclick="countCheckboxes(window.document.cbtest1);" /></form><b><span onClick="checkTheHead(0,window.document.cbtest1)" onmouseover="this.className=this.style.cursor='pointer', this.style.color='#1111dd' " onmouseout="this.style.cursor='', this.style.color='black' ">Select all</span></b></li>						<li></li>												</div>	

						<div style="visibility: hidden;">.</div>

						<div onmouseover="this.className='bghover'" onMouseOut="this.className=' '" onClick="checkTheBox(0);"><div class="clearfix"><li class="inner-box-2"><form name="cbtest1" style="padding: 0; margin: 0;"><INPUT  onClick="checkTheBox(0);" class="chkbox" name="0" type="checkbox" value="foo" /><a onClick="DontCheckTheBox(0);" target="_new" class="filelistlin" href='dump/aliens-vs-predator-requiem-20071026042116189.jpg'>aliens-vs-predator-requiem-20071026042116189.jpg</a></li>	<li class="inner-box-2-textpad">JPEG</li>		<li class="inner-box-2-textpad">09/02/00</li>		</div>	</div>
						<div onmouseover="this.className='bghover'" onMouseOut="this.className=' '" onClick="checkTheBox(1);"><div class="clearfix"><li class="inner-box-2"><INPUT onClick="checkTheBox(1);" class="chkbox" name="1" type="checkbox" value="foo" /><a onClick="DontCheckTheBox(1);" class="filelistlin" href='dump/bloc.gif'>bloc.gif</a></li>																		<li class="inner-box-2-textpad">JPEG</li>		<li class="inner-box-2-textpad">09/02/00</li>		</div>	</div>
						<div onmouseover="this.className='bghover'" onMouseOut="this.className=' '" onClick="checkTheBox(2);"><div class="clearfix"><li class="inner-box-2"><INPUT onClick="checkTheBox(2);" class="chkbox" name="2" type="checkbox" value="foo" /><a onClick="DontCheckTheBox(2);" class="filelistlin" href='dump/bloc2.gif'>bloc2.gif</a></li>																		<li class="inner-box-2-textpad">JPEG</li>		<li class="inner-box-2-textpad">09/02/00</li>		</div>	</div>
						<div onmouseover="this.className='bghover'" onMouseOut="this.className=' '" onClick="checkTheBox(3);"><div class="clearfix"><li class="inner-box-2"><INPUT onClick="checkTheBox(3);" class="chkbox" name="3" type="checkbox" value="foo" /><a onClick="DontCheckTheBox(3);" class="filelistlin" href='dump/blocl.gif'>blocl.gif</a></li>																		<li class="inner-box-2-textpad">JPEG</li>		<li class="inner-box-2-textpad">09/02/00</li>		</div>	</div>
						<div onmouseover="this.className='bghover'" onMouseOut="this.className=' '" onClick="checkTheBox(4);"><div class="clearfix"><li class="inner-box-2"><INPUT onClick="checkTheBox(4);" class="chkbox" name="4" type="checkbox" value="foo" /></form><a onClick="DontCheckTheBox(4);" class="filelistlin" href='dump/blocl2.gif'>blocl2.gif</a></li>																	<li class="inner-box-2-textpad">JPEG</li>		<li class="inner-box-2-textpad">09/02/00</li>		</div>	</div>

					</ul>
link
webwolf_3000's gravatar image

webwolf_3000

@Ray_Paseur: you are already passing the master checkbox name ('all') which i am assuming the id attribute value, and the array name ('abox') which is the name attribute value, and the form name 'checkForm'

here is my modified code. Please check the same


1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
function toggle(formName, masterName, arrayName) 
{
	var statement = "document." + formName + "." + arrayName;
	var field = eval( statement );
	if ( document.getElementById( "all" ).checked )
	{	
		for (i = 0; i < field.length; i++)
		{
			field[i].checked = true ;
		}
	}
	else
	{
		for (i = 0; i < field.length; i++)
		{
			field[i].checked = false ;
		}
	}
}
link
gurvinder372's gravatar image

gurvinder372

you can use jquery to get the parent of the clicked item

if($(this).parent().attr("name")=="checkForm")
   //do select
else
    leave
link
ddsh79's gravatar image

ddsh79

/*what goes here*/

try this

var cbox=document.getElementsByName(formName)[0].getElementsByTagName('input');
        if(cbox[0].checked){
            for(i=1;i<cbox.length;i++){
                cbox[i].checked=true;
            }
        }else{
            for(i=1;i<cbox.length;i++){
                cbox[i].checked=false;
            }
        }
link
ddsh79's gravatar image

ddsh79

@gurvinder372 did what you wanted (as did my code as well)

just a few hints that may or may not be useful

- do not give a name to your all checkbox if you do not need it's value be passed along with the form
(unless you really care a lot about validation)

- pass directly the checkbox object instead of formName and masterName

- get the form name using "this.form.name" but you do not need it as you can build the statement directly from the form object

- and you can get the master object's status by checking this.checked



code would be

function toggle(chk, arrayName)
{
      var statement = chk + "." + arrayName;
      var field = eval( statement );
      if ( chk.checked )
      {      
            for (i = 0; i < field.length; i++)
            {
                  field[i].checked = true ;
            }
      }
      else
      {
            for (i = 0; i < field.length; i++)
            {
                  field[i].checked = false ;
            }
      }
}


which i'd reduce further to

function toggle(chk, arrayName)
{
      var statement = chk + "." + arrayName;
      var field = eval( statement );
      for (i = 0; i < field.length; i++)
      {
            field[i].checked = chk.checked ;
      }
}

your line 37 would be
<input type="checkbox" onClick="toggle(this, 'abox')">ALL

---

nb i do not want points on this thread.
@gurvinder372 gave you a perfect answer in the first place

i still think that given the simplicity of the task, a single-line code is as simple to maintain
take a look at the following :
<input type="checkbox"
onclick="javascript:for(i=0;i<this.form.abox.length;i++)this.form.abox[i].checked=this.checked;" />
link
skullnobrains's gravatar image

skullnobrains

Thanks - almost got what I want.   Follow-on Q posted.
link
Ray_Paseur's gravatar image

Ray_Paseur

Your answer
[hide preview]

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here

By RSS:

Answers

Answers and Comments

Tags:

×1

Asked: 10/07/2010 10:23

Seen: 312 times

Last updated: 10/08/2010 03:11