...

View Full Version : check another checkbox when checked



ofiroth
11-08-2004, 02:31 PM
hi,
i have 2 sets of checkbox. when i click a button i want the same checkbox to be checked on the other set of checkbox.
i dont know how to write the function.
thanks ofir.

<form method="POST" action="Form.asp" name="Form1">
set 1:
<input type="checkbox" name="Cbox1" value="311" checked>Engineering
<input type="checkbox" name="Cbox1" value="307" >Environment
<input type="checkbox" name="Cbox1" value="299" checked>Fire
<input type="checkbox" name="Cbox1" value="306" >Industry

set 2:
<input type="checkbox" name="Cbox2" value="311" checked>Engineering
<A Href=javascript:checked(311);>checked</a>
<input type="checkbox" name="Cbox2" value="307" >Environment
<A Href=javascript:checked(307);>checked</a>
<input type="checkbox" name="Cbox2" value="299" checked>Fire
<A Href=javascript:checked(299);>checked</a>
<input type="checkbox" name="Cbox2" value="306" >Industry
<A Href=javascript:checked(306);>checked</a>

</form>

kansel
11-08-2004, 07:19 PM
This was a bit harder than I'd first thought it would be. Because you're using checkbox groups (multiple checkboxes with same name), in order to match which checkbox was just checked, it is necessary to walk the array checking for values. (I couldn't find a way to lookup the array index of the clicked checkbox without using a loop.)

Here's what I've got, it works great but there are some hard-coded elements in it which reduce its reusability somewhat.
<script type="text/javascript">
function checkTwice(c){
f = c.form; v = c.value; cbox2 = f.elements["Cbox2"];
for(var i = 0; i < cbox2.length; i++)
if(cbox2[i].value == v) break;
cbox2[i].checked = c.checked;
}
</script>
<form method="POST" action="Form.asp" name="Form1">
<fieldset><legend>set 1:</legend>
<input type="checkbox" name="Cbox1" value="311" checked onclick="checkTwice(this)">Engineering
<input type="checkbox" name="Cbox1" value="307" onclick="checkTwice(this)">Environment
<input type="checkbox" name="Cbox1" value="299" checked onclick="checkTwice(this)">Fire
<input type="checkbox" name="Cbox1" value="306" onclick="checkTwice(this)">Industry
</fieldset>
<fieldset><legend>set 2:</legend>
<input type="checkbox" name="Cbox2" value="311" checked>Engineering
<A Href=javascript:checked(311);>checked</a>
<input type="checkbox" name="Cbox2" value="307" >Environment
<A Href=javascript:checked(307);>checked</a>
<input type="checkbox" name="Cbox2" value="299" checked>Fire
<A Href=javascript:checked(299);>checked</a>
<input type="checkbox" name="Cbox2" value="306" >Industry
<A Href=javascript:checked(306);>checked</a>
</fieldset>
</form>

ofiroth
11-09-2004, 09:52 AM
thanks for the reply.
its work grate.

Kor
11-09-2004, 11:17 AM
a more dinamic aproach might be:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script language="JavaScript" type="text/JavaScript">
function checkTwice(){
var objOne=document.getElementById('Cbox1').getElementsByTagName('input');
var objTwo=document.getElementById('Cbox2').getElementsByTagName('input');
for(var i=0;i<objOne.length;i++){
if(objOne[i].checked){objTwo[i].checked=true}
else{objTwo[i].checked=false}
}
}
</script>
</head>
<body>
<div id="Cbox1">
<input type="checkbox" value="311" checked onclick="checkTwice()">Engineering
<input type="checkbox" value="307" onclick="checkTwice()">Environment
<input type="checkbox" value="299" checked onclick="checkTwice()">Fire
<input type="checkbox" value="306" onclick="checkTwice()">Industry
</div>
<div id="Cbox2">
<input type="checkbox" value="311" checked>Engineering
<A Href=javascript:checked(311);>checked</a>
<input type="checkbox" value="307" >Environment
<A Href=javascript:checked(307);>checked</a>
<input type="checkbox" value="299" checked>Fire
<A Href=javascript:checked(299);>checked</a>
<input type="checkbox" value="306" >Industry
<A Href=javascript:checked(306);>checked</a>
</div>
</body>
</html>

kansel
11-09-2004, 06:25 PM
Kor

Removing the name attribute of the inputs will likely have a negative effect if this form is processed by a server-side script.

Your script also assumes that the checkboxes will be in the same order between cbox1 and cbox2 and that no other inputs will be present.

Kor
11-10-2004, 10:03 AM
Removing the name attribute of the inputs will likely have a negative effect if this form is processed by a server-side script.

I presumed ofiroth knows enough HTML to use names on form's elements. I only wanted to show that he might use whichever names, whichever values, no matter the number of checkboxes, as long as both groups have same length. That is a full dynamic solution, I reckon...


Your script also assumes that the checkboxes will be in the same order

Nope. ofiroth's HTML code assumes that. I did that for his code. On the other hand I see no reason for a different order...
I did not say that my solution is the best or the worst. It is just a different aproach, that is all.

hemebond
11-10-2004, 09:36 PM
i have 2 sets of checkbox. when i click a button i want the same checkbox to be checked on the other set of checkbox.What is the point of this?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum