Radio Buttons & Parent/Children

Forum Moderators: open

Message Too Old, No Replies

Radio Buttons & Parent/Children

scoobydoo987

4:49 am on Jul 1, 2005 (gmt 0)

How would I go about writing client side JavaScript to allow the user to check a parent Yes/No radio button and depending on which one they choose it would then check their children below it. Could be a number of children for Yes or No and if the Parent is checked then check all the children.

Don't have a clue where to start. Somebody mentioned that the Parent/Children option might work for me.

Thanks.

j4mes

12:44 pm on Jul 3, 2005 (gmt 0)

Using onclick to detect when it's selected, you could select them individually by id, though this is a little inefficient if you have lots and lots of them:

onclick="javascript:select();"

function select() {

document.getElementById("BUTTON_A").checked = "checked";
document.getElementById("BUTTON_B").checked = "checked";
document.getElementById("BUTTON_C").checked = "checked";

// etc.

}

Rambo Tribble

1:22 pm on Jul 3, 2005 (gmt 0)

It sort of sounds like radio buttons are getting mixed with check boxes here. At any rate, input elements don't tend to support children (yes, input elements are deadbeats). In other words, you can't have a radio button within a radio button.

Perhaps siblings would be of use, but I suspect that looping within a container element will serve you best. See if this helps:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function checkEm(targ){
 var all_ins=targ.getElementsByTagName('input');
 var a_i_ln=all_ins.length;
 var ck_var=all_ins[0].checked;
 for(var i=1;i<a_i_ln;i++){
  if(all_ins[i].type=='checkbox')all_ins[i].checked=ck_var;
 }
}
</script>
</head>
<body>
<form action="">
<ul>
<li><input type="checkbox" onclick="checkEm(this.parentNode);"/>
 <ul>
 <li><input type="checkbox" /></li>
 <li><input type="checkbox" /></li>
 <li><input type="checkbox" /></li>
 </ul>
</li>
</ul>
</form>
</body>
</html>