Checkboxed 2

liteon · Jan 7, 2003

The script below creates 3 checkboxes. Can anyone please help me to write a script that if checkbox A is pressed then the others (B and C) are disabled, and if checkbox B or/and C are pressed checkbox A will be disabled.

Thanks.

<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<p>A
<input name="A" type="checkbox" id="A" value="checkbox">
</p>
<p>B
<input name="B" type="checkbox" id="B" value="checkbox">
</p>
<p>C
<input name="C" type="checkbox" id="C" value="checkbox">
</p>
</body>
</html>

mwolf00 · Jan 8, 2003

<html>
<head>
<title>Untitled Document</title>
<script>
function oneCheckbox(inBox){
if (inBox.name == "A" && document.myForm.A.checked){
document.myForm.B.checked = false
document.myForm.C.checked = false
}
if (inBox.name == "B" && document.myForm.B.checked){
document.myForm.A.checked = false
document.myForm.C.checked = false
}
if (inBox.name == "C" && document.myForm.C.checked){
document.myForm.A.checked = false
document.myForm.B.checked = false
}
}
</script>
</head>
<body>
<form name="myForm">
<p>A
<input name="A" type="checkbox" id="A" value="checkbox" onClick="oneCheckbox(this)">
</p>
<p>B
<input name="B" type="checkbox" id="B" value="checkbox" onClick="oneCheckbox(this)">
</p>
<p>C
<input name="C" type="checkbox" id="C" value="checkbox" onClick="oneCheckbox(this)">
</p>
</form>
</body>
</html> Get the Best Answers! faq333-2924
"A witty saying proves nothing." - Voltaire
mikewolf@tst-us.com

liteon · Jan 8, 2003

Thanks that’s what I call JavaScript magic.

liteon · Jan 8, 2003

Is it possible to make the script above generic so a,b,c will be like variables ($a,$b,$c) so I can use the function like oneCheckbox(a,b,c) or oneCheckbox(Tel,Fax,Email)?

<html>
<head>
<title>Untitled Document</title>
<script>
function oneCheckbox(inBox){
if (inBox.name == "A" && document.myForm.A.checked){
document.myForm.B.checked = false
document.myForm.C.checked = false
}
if (inBox.name == "B" && document.myForm.B.checked){
document.myForm.A.checked = false
document.myForm.C.checked = false
}
if (inBox.name == "C" && document.myForm.C.checked){
document.myForm.A.checked = false
document.myForm.B.checked = false
}
}
</script>
</head>
<body>
<form name="myForm">
<p>A
<input name="A" type="checkbox" id="A" value="checkbox" onClick="oneCheckbox(this)">
</p>
<p>B
<input name="B" type="checkbox" id="B" value="checkbox" onClick="oneCheckbox(this)">
</p>
<p>C
<input name="C" type="checkbox" id="C" value="checkbox" onClick="oneCheckbox(this)">
</p>
</form>
</body>
</html>

mwolf00 · Jan 8, 2003

Yes. I actually prefer this method:

<html>
<head>
<title>Untitled Document</title>
<script>
function oneCheckbox(inBox){
if (inBox.checked){
boxGroup = inBox.name.substr(0,2)
boxName = inBox.name.substr(2,1)
for (x=0; x<document.myForm.elements.length; x++){
if (document.myForm.elements[x].name.substr(0,2) == boxGroup){
if (document.myForm.elements[x].name.substr(2,1) != boxName){
document.myForm.elements[x].checked = false
}
}
}
}
}
</script>
</head>
<body>
<form name="myForm">
<p>A
<input name="G1A" type="checkbox" id="A" value="checkbox" onClick="oneCheckbox(this)">
</p>
<p>B
<input name="G1B" type="checkbox" id="B" value="checkbox" onClick="oneCheckbox(this)">
</p>
<p>C
<input name="G1C" type="checkbox" id="C" value="checkbox" onClick="oneCheckbox(this)">
</p>
<p>2A
<input name="G2A" type="checkbox" id="A" value="checkbox" onClick="oneCheckbox(this)">
</p>
<p>2B
<input name="G2B" type="checkbox" id="B" value="checkbox" onClick="oneCheckbox(this)">
</p>
<p>2C
<input name="G2C" type="checkbox" id="C" value="checkbox" onClick="oneCheckbox(this)">
</p>
</form>
</body>
</html> Get the Best Answers! faq333-2924
"A witty saying proves nothing." - Voltaire
mikewolf@tst-us.com

liteon · Jan 8, 2003

The last script is above my knowledge, but is it possible to make it behave as shown in the modified script below (it is hard to explain so I think better to see), but change the script to work in an “a, b, c function” mode.

<html>
<head>
<title>Untitled Document</title>
<script>
function oneCheckbox(inBox){
if (inBox.name == "A" && document.myForm.A.checked){
document.myForm.B.checked = false
document.myForm.C.checked = false
}
if (inBox.name == "B" && document.myForm.B.checked){
document.myForm.A.checked = false

}
if (inBox.name == "C" && document.myForm.C.checked){
document.myForm.A.checked = false
}
}
</script>
</head>
<body>
<form name="myForm">
<p>A
<input name="A" type="checkbox" id="A" value="checkbox" onClick="oneCheckbox(this)">
</p>
<p>B
<input name="B" type="checkbox" id="B" value="checkbox" onClick="oneCheckbox(this)">
</p>
<p>C
<input name="C" type="checkbox" id="C" value="checkbox" onClick="oneCheckbox(this)">
</p>
</form>
</body>
</html>

likeopensource · Jan 8, 2003

you could use this I have checked it in netscape 7 and ie 5.0

replace the names of the checkboxes

<HTML>
<HEAD>

<script language="JavaScript">
function test(passed)
{
window.document.FORM1.checkbox2.disabled =false;
window.document.FORM1.checkbox3.disabled =false;
window.document.FORM1.checkbox3.disabled =false;

if ( passed == 1)
{
if (window.document.FORM1.checkbox1.checked ==false)
{
window.document.FORM1.checkbox2.disabled =false;
window.document.FORM1.checkbox3.disabled =false;
}
else
{
window.document.FORM1.checkbox2.disabled =true;
window.document.FORM1.checkbox3.disabled =true;
}
}
if ( (passed == 2)|| (passed == 3) )
{
window.document.FORM1.checkbox1.disabled =true;

if ( (window.document.FORM1.checkbox2.checked ==false) && (window.document.FORM1.checkbox3.checked == false))
{
window.document.FORM1.checkbox1.disabled =false;
}
else
{
window.document.FORM1.checkbox1.disabled =true;
}
}

}

</script>
<TITLE></TITLE>
</HEAD>
<BODY>
<FORM id=FORM1 name=FORM1 action="" method=post>
First<INPUT type="checkbox" id=checkbox1 name=checkbox1 onClick="javascript: test(1);" >
<br>
Second<INPUT type="checkbox" id=checkbox2 name=checkbox2 onClick="javascript: test(2);" >
<br>
Third<BR><INPUT type="checkbox" id=checkbox3 name=checkbox3 onClick="javascript: test(3);" >

<P> </P></FORM>

</BODY>
</HTML>

mwolf00 · Jan 8, 2003

You say this is above your knowledge, but let me explain...

<html>
<head>
<title>Untitled Document</title>
<script>
function oneCheckbox(inBox){
if (inBox.checked){
boxGroup = inBox.name.substr(0,2) Holds the first 2 digits of the checkbox's name
boxName = inBox.name.substr(2,1) Holds the A,B,C,D,E (whatever character is in the 3rd slot)
for (x=0; x<document.myForm.elements.length; x++){ look at each element in the form
if (document.myForm.elements[x].name.substr(0,2) == boxGroup){ If the first two chracters match... This enables you to create groups of checkboxes
if (document.myForm.elements[x].name.substr(2,1) != boxName){ if the 3rd chracter doesn't match the 'inBox' then uncheck the box
document.myForm.elements[x].checked = false
}
}
}
}
}
</script>
</head>
<body>
<form name="myForm">
<p>A
Now all you have to do is name your boxes with the same first two characters (for boxes in the same group) and a different 3rd character (like a,b,c,d,e,f)
<input name="G1A" type="checkbox" id="A" value="checkbox" onClick="oneCheckbox(this)">
</p>
<p>B
<input name="G1B" type="checkbox" id="B" value="checkbox" onClick="oneCheckbox(this)">
</p>
<p>C
<input name="G1C" type="checkbox" id="C" value="checkbox" onClick="oneCheckbox(this)">
</p>
<p>2A
<input name="G2A" type="checkbox" id="A" value="checkbox" onClick="oneCheckbox(this)">
</p>
<p>2B
<input name="G2B" type="checkbox" id="B" value="checkbox" onClick="oneCheckbox(this)">
</p>
<p>2C
<input name="G2C" type="checkbox" id="C" value="checkbox" onClick="oneCheckbox(this)">
</p>
</form>
</body>
</html> Get the Best Answers! faq333-2924
"A witty saying proves nothing." - Voltaire
mikewolf@tst-us.com

liteon · Jan 8, 2003

Thanks, view the script it is a bit clearer right now.
It seems that I can only choose one of the boxes while I would thank you if you can modify the code so I can push B, C, D but not A and opposite.

Thanks a lot for all the help.

Script:
<html>
<head>
<title>Untitled Document</title>
<script>
function oneCheckbox(inBox){
if (inBox.checked){
boxGroup = inBox.name.substr(0,2)
boxName = inBox.name.substr(2,1)
for (x=0; x<document.myForm.elements.length; x++){
if (document.myForm.elements[x].name.substr(0,2) == boxGroup){
if (document.myForm.elements[x].name.substr(2,1) != boxName){
document.myForm.elements[x].checked = false
}
}
}
}
}
</script>
</head>
<body>
<form name="myForm">
<p>A

<input name="G1A" type="checkbox" id="A" value="checkbox" onClick="oneCheckbox(this)">
</p>
<p>B
<input name="G1B" type="checkbox" id="B" value="checkbox" onClick="oneCheckbox(this)">
</p>
<p>C
<input name="G1C" type="checkbox" id="C" value="checkbox" onClick="oneCheckbox(this)">
</p>
<p>D
<input name="G1D" type="checkbox" id="A" value="checkbox" onClick="oneCheckbox(this)">
</p>

</form>
</body>
</html>

mwolf00 · Jan 8, 2003

Argh! I guess I didn't read closely enough at first... I'll post a solution in a few minutes. Get the Best Answers! faq333-2924
"A witty saying proves nothing." - Voltaire
mikewolf@tst-us.com

mwolf00 · Jan 8, 2003

I hope this isn't too convoluted....

<html>
<head>
<title>Untitled Document</title>
<script>
function oneCheckbox(inBox){
if (inBox.checked){
boxGroup = inBox.name.substr(0,2)
boxName = inBox.name.substr(2,1)
for (x=0; x<document.myForm.elements.length; x++){
if (document.myForm.elements[x].name.substr(0,2) == boxGroup){
if (boxName == "A&quot

{
if (document.myForm.elements[x].name.substr(2,1) != boxName){
document.myForm.elements[x].checked = false
}
else{
if (document.myForm.elements[x].name.substr(2,1) != "A&quot

{
document.myForm.elements[x].checked = false
}
}
}
else{ // a box other than A was checked
eval("document.myForm." + boxGroup + "A.checked = false&quot

}
}
}
}
}
</script>
</head>
<body>
<form name="myForm">
<p>A

<input name="G1A" type="checkbox" id="A" value="checkbox" onClick="oneCheckbox(this)">
</p>
<p>B
<input name="G1B" type="checkbox" id="B" value="checkbox" onClick="oneCheckbox(this)">
</p>
<p>C
<input name="G1C" type="checkbox" id="C" value="checkbox" onClick="oneCheckbox(this)">
</p>
<p>D
<input name="G1D" type="checkbox" id="A" value="checkbox" onClick="oneCheckbox(this)">
</p>

</form>
</body>
</html> Get the Best Answers! faq333-2924
"A witty saying proves nothing." - Voltaire
mikewolf@tst-us.com

liteon · Jan 8, 2003

Thanks a lot, now I need to digest it.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Checkboxed 2

liteon

Programmer

mwolf00

Programmer

liteon

Programmer

liteon

Programmer

mwolf00

Programmer

liteon

Programmer

likeopensource

Programmer

mwolf00

Programmer

liteon

Programmer

mwolf00

Programmer

mwolf00

Programmer

liteon

Programmer

Part and Inventory Search

Sponsor