/    Sign up×
Community /Pin to ProfileBookmark

Help – Javascript Checkbox

Copy linkTweet thisAlerts:
Oct 14.2003

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>

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@pyroOct 15.2003 — Try something like this:

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Example&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
&lt;script type="text/javascript"&gt;
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 = "";
}
}
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body bgcolor="#FFFFFF" text="#000000"&gt;
&lt;form name="form1" method="post" action=""&gt;
&lt;p&gt;&lt;input type="checkbox" name="a" value="A" onclick="checkVals(this);"&gt; A&lt;/p&gt;
&lt;p&gt;&lt;input type="checkbox" name="b" value="B" onclick="checkVals(this);"&gt; B&lt;/p&gt;
&lt;p&gt;&lt;input type="checkbox" name="c" value="C" onclick="checkVals(this);"&gt; C&lt;/p&gt;
&lt;p&gt;&lt;input type="checkbox" name="d" value="D" onclick="checkVals(this);"&gt; D&lt;/p&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@michaelriauthorOct 15.2003 — 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.
Copy linkTweet thisAlerts:
@TomDenverOct 15.2003 — 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.
Copy linkTweet thisAlerts:
@pyroOct 15.2003 — Yes, TomDenver is correct. JavaScript will make an array of the checkboxes. I'd just do the matching by value, in this case:

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Example&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
&lt;script type="text/javascript"&gt;
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 = "";
}
}
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body bgcolor="#FFFFFF" text="#000000"&gt;
&lt;form name="form1" method="post" action=""&gt;
&lt;p&gt;&lt;input type="checkbox" name="stringDomain" value="Yahoo" onclick="checkVals(this);"&gt; A&lt;/p&gt;
&lt;p&gt;&lt;input type="checkbox" name="stringDomain" value="Google" onclick="checkVals(this);"&gt; B&lt;/p&gt;
&lt;p&gt;&lt;input type="checkbox" name="stringDomain" value="AltaVista" onclick="checkVals(this);"&gt; C&lt;/p&gt;
&lt;p&gt;&lt;input type="checkbox" name="stringDomain" value="AllTheWeb" onclick="checkVals(this);"&gt; D&lt;/p&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@michaelriauthorOct 15.2003 — To PYRO and TOMDENVER,

Thank you for your help! You guys are great!

Michael
Copy linkTweet thisAlerts:
@pyroOct 15.2003 — You bet... ?
×

Success!

Help @michaelri spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...