Checkboxes

Chames · 12-29-2005, 10:05 PM

Here is the code I currently have (I took out a lot of the options to make it less code)

Code:

<form name="effects" action="" method="POST">  
<input type="checkbox" name="box[]" value="1">Army change name<br> 
<input type="checkbox" name="box[]" value="2">Army damage<br> 
<input type="submit" name="check" value="SEND">  
</form>

I can't get the "check all" and "uncheck all" script to work with this code, any help? Also can I have a "group select" button. Example:

([]=checkbox) ([button])

Code:

[check all]
[uncheck all]

[]Select all army
[] army...
[] army...
[] army...
[] army...

[]Select all QV
[] QV...
[] QV...
[] QV...

Thats the basic layout I want. Thanks for all the help!

vwphillips · 12-29-2005, 10:42 PM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
  <title></title>
<script language="JavaScript" type="text/javascript">
<!--
function CkAllNone(f,obj){
 var eles=f.elements;
 for (zxc0=0;zxc0<eles.length;zxc0++){
  if (eles[zxc0].type=='checkbox'){
   eles[zxc0].checked=obj.checked
  }
 }
}

function CkAllNoneName(f,obj){
 var eles=f.elements;
 for (zxc0=0;zxc0<eles.length;zxc0++){
  if (eles[zxc0].type=='checkbox'&&eles[zxc0].name==obj.name){
   eles[zxc0].checked=obj.checked
  }
 }
}
//-->
</script>
</head>

<body>
<form name="effects" action="" method="POST">
<input type="checkbox" name="box1[]" value="1">Army change name<br>
<input type="checkbox" name="box[]" value="1">Army change name<br>
<input type="checkbox" name="box[]" value="2">Army damage<br>
<input type="checkbox" value="2" name="box[]" onclick="CkAllNoneName(this.form,this);" >check All/None this name<br>
<input type="checkbox" value="2" onclick="CkAllNone(this.form,this);" >check All/None<br>
<input type="submit" name="check" value="SEND">
</form>
</body>

</html>

Chames · 12-29-2005, 11:22 PM

Wow... uhh... thanks a ton.

Bill Posters · 12-29-2005, 11:45 PM

Fwiw…

e.g.

toggler.js

Code:

function toggleAll(trgtEl,checkVal) {

	var obj = document.getElementById(trgtEl);
	var inputs = obj.getElementsByTagName('input');

	for (var i=0; i<inputs.length; i++) {
		if (inputs[i].type == 'checkbox') {
			inputs[i].checked = (trgtEl=='checkForm') ? checkVal : document.getElementById('toggle-'+trgtEl).checked;
		}
	}

}

markup

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>test</title>
	<script type="text/javascript" src="toggler.js"></script>
</head>
<body>

<form action="/" method="post" id="checkForm">

	<fieldset id="controls">

		<button type="button" value="check all" onclick="toggleAll('checkForm',true);">Check all</button><br />
		<button type="button" value="uncheck all" onclick="toggleAll('checkForm');">Uncheck all</button>

	</fieldset>

	<fieldset id="army">

		<label><input type="checkbox" onchange="toggleAll('army');" id="toggle-army" /> Select all Army</label><br /><br />
		<label><input type="checkbox" /> Army...</label><br />
		<label><input type="checkbox" /> Army...</label><br />
		<label><input type="checkbox" /> Army...</label><br />
		<label><input type="checkbox" /> Army...</label><br />

	</fieldset>

	<fieldset id="qv">

		<label><input type="checkbox" onchange="toggleAll('qv');" id="toggle-qv" /> Select all QV</label><br /><br />
		<label><input type="checkbox" /> QV...</label><br />
		<label><input type="checkbox" /> QV...</label><br />
		<label><input type="checkbox" /> QV...</label><br />
		<label><input type="checkbox" /> QV...</label><br />

	</fieldset>

</form>

</body>
</html>