PDA

Click to See Complete Forum and Search --> : Help - Javascript Checkbox

michaelri
10-14-2003, 05:54 PM
Issues:

If A is checked, B must be checked also. If A is unchecked, B must be uncheked also. Same for B.

If C is checked, D must be checked also. If C is unchecked, D must be uncheked also. Same for D.

Please help
-------------------------------------------------------------------

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#FFFFFF" text="#000000">
<form name="form1" method="post" action="">
<input type="checkbox" name="checkbox" value="checkbox">
A<br>
<br>
<input type="checkbox" name="checkbox2" value="checkbox">
B<br>
<br>
<input type="checkbox" name="checkbox3" value="checkbox">
C<br>
<br>
<input type="checkbox" name="checkbox4" value="checkbox">
D
</form>
</body>
</html>
pyro
10-15-2003, 08:04 AM
Try something like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function checkVals(obj) {
if (obj.checked) {
if (obj.name == "a" || obj.name == "b") {
document.form1.a.checked = true;
document.form1.b.checked = true;
}
if (obj.name == "c" || obj.name == "d") {
document.form1.c.checked = true;
document.form1.d.checked = true;
}
}
else {
if (obj.name == "a" || obj.name == "b") {
document.form1.a.checked = "";
document.form1.b.checked = "";
}
if (obj.name == "c" || obj.name == "d") {
document.form1.c.checked = "";
document.form1.d.checked = "";
}
}
}
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<form name="form1" method="post" action="">
<p><input type="checkbox" name="a" value="A" onclick="checkVals(this);"> A</p>
<p><input type="checkbox" name="b" value="B" onclick="checkVals(this);"> B</p>
<p><input type="checkbox" name="c" value="C" onclick="checkVals(this);"> C</p>
<p><input type="checkbox" name="d" value="D" onclick="checkVals(this);"> D</p>
</form>
</body>
</html>
michaelri
10-15-2003, 10:20 AM
Thanks for the quick reply!

What about if all checkbox names are all the same? For example:

name="stringDomain" value="Yahoo"
name="stringDomain" value="Altavista"
name="stringDomain" value="Google"

Thanks.
TomDenver
10-15-2003, 10:35 AM
I believe in that case JavaScript automatically places those checkboxes in an array, and you can reference each one like this:

stringDomain[0]
stringDomain[1]
stringDomain[2]

and so on. The numbers for each are determined by the order they are used in your HTML.
pyro
10-15-2003, 11:50 AM
Yes, TomDenver is correct. JavaScript will make an array of the checkboxes. I'd just do the matching by value, in this case:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function checkVals(obj) {
if (obj.checked) {
if (obj.value == "Yahoo" || obj.value == "Google") {
document.form1.stringDomain[0].checked = true;
document.form1.stringDomain[1].checked = true;
}
if (obj.value == "AltaVista" || obj.value == "AllTheWeb") {
document.form1.stringDomain[2].checked = true;
document.form1.stringDomain[3].checked = true;
}
}
else {
if (obj.value == "Yahoo" || obj.value == "Google") {
document.form1.stringDomain[0].checked = "";
document.form1.stringDomain[1].checked = "";
}
if (obj.value == "AltaVista" || obj.value == "AllTheWeb") {
document.form1.stringDomain[2].checked = "";
document.form1.stringDomain[3].checked = "";
}
}
}
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<form name="form1" method="post" action="">
<p><input type="checkbox" name="stringDomain" value="Yahoo" onclick="checkVals(this);"> A</p>
<p><input type="checkbox" name="stringDomain" value="Google" onclick="checkVals(this);"> B</p>
<p><input type="checkbox" name="stringDomain" value="AltaVista" onclick="checkVals(this);"> C</p>
<p><input type="checkbox" name="stringDomain" value="AllTheWeb" onclick="checkVals(this);"> D</p>
</form>
</body>
</html>
michaelri
10-15-2003, 03:42 PM
To PYRO and TOMDENVER,

Thank you for your help! You guys are great!

Michael
pyro
10-15-2003, 04:04 PM
You bet... :)