Forum Moderators: open
I need such a design. For example: There are 8 checkboxs
[codes]
<input type="checkbox" value="a" /> A
<input type="checkbox" value="b" /> B
<input type="checkbox" value="c" /> C
<input type="checkbox" value="e" /> E
<input type="checkbox" value="f" /> F
<input type="checkbox" value="g" /> G
<input type="checkbox" value="1" /> Tick Group 1
<input type="checkbox" value="2" /> Tick Group 2
[/codes]
When user ticks the box "Tick Group 1", A, B, C check boxes will be checked.
When user ticks the box "Tick Group 2", E, F, G check boxes will be checked.
Can someone provide sample code for this function?
Thanks in advance!
<input type="checkbox" name="Gb1" value="e" /> E
<input type="checkbox" name="Gb2" value="f" /> F
<input type="checkbox" name="Gb3" value="g" /> G
<input type="checkbox" name="G1" value="1" onclick="CheckBoxes(1, 3)" /> Tick Group 1
<input type="checkbox" name="G2" onclick="CheckBoxes(2, 3)" value="2" /> Tick Group 2
<!-- ============================================ -->
<script language="javascript" type="text/javascript">
<!--
function CheckBoxes(i, j){
if(i==1){
for(k=1; k<=j; k++){
tmp=eval('document.myform.Ga'+k);
tmp.checked=document.myform.G1.checked;
}
}
else if(i==2){
for(k=1; k<=j; k++){
tmp=eval('document.myform.Gb'+k);
tmp.checked=document.myform.G2.checked;
}
}
}
//-->
</script>
<!-- ======================================== -->
That javascript function will toggle each group depending with tick group checkbox is checked or unchecked.
"myform" will be repplace by the name you have given to your form.
You can even optimize the function above to make it more compact.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/1998/REC-html40-19980424/loose.dtd">
<!-- doctype on ONE LINE -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
<script type="text/javascript">
window.onload=function() {
if (document.getElementById) {
document.getElementById('grp1').onclick=function() { checkBoxes('group1'); };
document.getElementById('grp2').onclick=function() { checkBoxes('group2'); };
}
};
function checkBoxes(whichGroup) {
// no need to check for document.getElementById here -
// if it doesn't attach via window.onload,
//this will never get called
if (whichGroup=='group1') { var boxes = Array('a','b','c'); }
else if (whichGroup=='group2') { var boxes = Array('d','e','f'); }
else { alert('Invalid group supplied.'); return false; }
for (i=0;i<=boxes.length;i++) {
var obj = document.getElementById(boxes[i]);
// Note it also toggles on/off
obj.checked=(obj.checked==true)?false:true;
}
}
</script>
</head>
<body>
<p>I see no XHTML here. HTML doctype and validation applied.</p>
<form action="">
<h4>Group 1</h4>
<p><input type="checkbox" name="a" id="a" value="a"> A</p>
<p><input type="checkbox" name="b" id="b" value="b"> B</p>
<p><input type="checkbox" name="c" id="c" value="c"> C</p>
<h4>Group 2</h4>
<p><input type="checkbox" name="d" id="d" value="e"> D</p>
<p><input type="checkbox" name="e" id="e" value="e"> E</p>
<p><input type="checkbox" name="f" id="f" value="f"> F</p>
<h4>select Group</h4>
<p><input type="checkbox" name="grp1" id="grp1" value="1"> Tick Group 1</p>
<p><input type="checkbox" name="grp2" id="grp2" value="2"> Tick Group 2 </p>
</form>
</body>
</html>
