Uncheck checkboxes under Radio Buttons 2

[RAxel]

Hey all, I'm new when it comes to javascript so please bear with me (but I think this is a simple answer anyway)

This is the layout I have on a website using ColdFusion:

RadioButton1 name=Q01 id=Q01A
Checkbox1 name=Q01A01 id=Q01A01
Checkbox2 name=Q01A02 id=Q01A02
Checkbox3 name=Q01A03 id=Q01A03
RadioButton2 name=Q01 id=Q01B
.
.
.

The 3 checkboxes described above belong to RadioButton1, and are only visible when a user selects RadioButton1. Now, this web page is going to display answers the user has already preselected on another visit (ie, if he chose radiobutton1 and checkbox2- then the page will display radiobutton1 checked and the other checkboxes display but just with checkbox2 checked).

Now, this is my question. A user wants to change their answers, perhaps, selecting RadioButton2 (therefore switching from RadioButton1). What I want are for the checkboxes (those listed under RadioButton1) to be unchecked and I've been told my best bet is client-side with Javascript.

I'm using ColdFusion so I believe I want to use the onChange event of the radiobutton. Can anyone give me any suggestions/hints?

Thanks for your input.

 

[tsuji]

Like this.
[tt]
<script language="javascript">
function reconfig(obj) {
var sname=obj.name;
var sid=obj.id;
var sdivid=sid+"_id";
var re=new RegExp("sid");

document.getElementById(sdivid).style.display=obj.checked?"block":"none";

var oform=obj.form;
for (var i=0; i<oform.length;i++) {
var oelem=oform.elements;
if (oelem.type=="radio" && oelem.name==sname) {
document.getElementById(oelem.id+"_id").style.display=oelem.checked?"block":"none";
}
if (oelem.type=="checkbox" && !re.test(oelem.id)) {
oelem.checked=false;
}
}
}
</script>
[/tt]
with the relevant element structured like this.
[tt]
<form>
<input type="radio" name="Q01" id="Q01A" checked="checked" onclick="reconfig(this)" /><br />
<div id="Q01A_id" style="display:block;">
<input type="checkbox" name="Q01A01" id="Q01A01" />
<input type="checkbox" name="Q01A02" id="Q01A02" checked="checked" />
<input type="checkbox" name="Q01A03" id="Q01A03" />
</div>
<input type="radio" name="Q01" id="Q01B" onclick="reconfig(this)" /><br />
<div id="Q01B_id" style="display:none;">
<input type="checkbox" name="Q01B01" id="Q01B01" />
<input type="checkbox" name="Q01B02" id="Q01B02" />
<input type="checkbox" name="Q01B03" id="Q01B03" />
</div>
<input type="radio" name="Q01" id="Q01C" onclick="reconfig(this)" /><br />
<div id="Q01C_id" style="display:none;">
<input type="checkbox" name="Q01C01" id="Q01C01" />
<input type="checkbox" name="Q01C02" id="Q01C02" />
<input type="checkbox" name="Q01C03" id="Q01C03" />
</div>
</form>
[/tt]
One planned ingredient there is to device a div to contain each the checkbox-group with appropriate naming.

The above illustrates the essential.

 

[RAxel]

About the line that has: <div id="......>

I have that radio buttons and checkboxes in a table, so I have the following code: <tr id="....... style="display:..>

First off, is that pretty much the same thing? Also, I should be able to modify the code above to use the tr id, correct?

Thanks for your help!

 

[tsuji]

You should be able to. Just assign the corresponding divids to the corresponding tr.

 

[RAxel]

Your code works great. I just have one question.

I wanted to use the onChange event instead of the onClick event (your code works perfectly for the onClick event- thanks!). When I changed the code to the onChange event this is what happened:

I first clicked radio button2 and nothing happened. When I clicked back to the first radio button (the one with the default checked) it unchecked the checkboxes below it. I thought the onChange event had to do with any change in the status of the radio button (either from on to off or off to on).

What's with the onChange event? Thanks.

 

[tsuji]

You've to note that radio buttons form groups. One changes and one of the rest within the group changes as well. Hence, radio buttons do not support onchange handling in the standards.

http://www.w3.org/TR/1999/REC-html401-19991224/interact/scripts.html#adef-onchange

onchange = script [CT]
The onchange event occurs when a control loses the input focus and its value has been modified since gaining focus. This attribute applies to the following elements: INPUT, SELECT, and TEXTAREA.

 

[RAxel]

Ah, I understand now.

Just one last question to learn more about javascript (and I promise I'll leave you alone). Can you send something to two functions? Such as this: onClick="reconfig(this); 2ndfunction(this);" and have them work one right after the other?

Thanks!

 

[Fendal]

Yep,

<script type="text/javascript">
function _one1(a){
alert (a)
}
function _two2(b){
alert (b)
}
</script>

<button onclick="_one1('1');_two2('2')">test</button>

Test that.