Automatically selecting a checkbox based on the value of a radio button

[newjazzharmony]

Hello group,

I want to automatically select a specific checkbox when a user clicks
(selects) a specific item in a radiobutton group. Both controls are in
the same form.

Let's say for argument's sake that the form looks like this
(inessential items left out for the sake of clarity):

<form name=form1>
<input type=radio name=Radio1 value=Option1>
<input type=radio name=Radio1 value=Option2>
<input type=checkbox name=Checkbox1>
</form>

I want to write some Javascript to automatically select the "Checkbox1"
checkbox when a user selects "Option1" in the radio button group.

It seems like this should be pretty simple, but I'm scratching my head
over it.

Thanks in advance!
Jonathan

 

[RobG]

(e-mail address removed) said on 22/03/2006 8:35 AM AEST:

Hello group,

I want to automatically select a specific checkbox when a user clicks
(selects) a specific item in a radiobutton group. Both controls are in
the same form.

Let's say for argument's sake that the form looks like this
(inessential items left out for the sake of clarity):

<form name=form1>
<input type=radio name=Radio1 value=Option1>
<input type=radio name=Radio1 value=Option2>
<input type=checkbox name=Checkbox1>
</form>

I want to write some Javascript to automatically select the "Checkbox1"
checkbox when a user selects "Option1" in the radio button group.

It seems like this should be pretty simple, but I'm scratching my head
over it.

The trivial answer is to put an onclick attribute on the radio button to
check the checkbox:

<input type="radio" name="Radio1" value="Option1"
onclick="this.form.Checkbox1.checked=this.checked;">


But when some other radio is selected, checkbox1 is not deselected.
Also, the checkbox can be unchecked even though the radio is still checked.

That can be 'fixed' by instead putting an onclick on the form that keeps
the two in sync, e.g.:

<form name="form1" action=""
onclick="this.Checkbox1.checked=this.Radio1[0].checked;">
...
</form>

But that seems rather pointless. Using onclick on one element to cause a
change in another can often lead to a very confusing interface. It is
usually used for 'select all' or similar functionality. I suspect there
is more to this than you are telling us - for example, if the radio is
clicked should a (sub)set of checkboxes be checked? If any of those
checkboxes is unchecked, should the radio be unchecked too?

What are you really trying to do?

 

[newjazzharmony]

Rob,

Thanks for the response.
The essential reason that I posted the question was because I couldn't
figure out how to reference the checkbox from inside the onClick of the
radio button.
Unfortunately, the sample you posted (this.form.Checkbox1) doesn't seem
to be working.
Are you sure that syntax is correct?

Thanks,

Jonathan

 

[RobG]

(e-mail address removed) said on 23/03/2006 1:00 AM AEST:

Rob,

Please quote what you are replying to - I posted two code snippets to be
used in different contexts. You may have used one in the other's
context. As you haven't quoted which bit you are replying to, I can't
tell what you are referring to.

Thanks for the response.
The essential reason that I posted the question was because I couldn't
figure out how to reference the checkbox from inside the onClick of the
radio button.
Unfortunately, the sample you posted (this.form.Checkbox1) doesn't seem
to be working.
Are you sure that syntax is correct?

Yes, but it is not enough that that bit is correct. You need to either
quote what you are replying too or post the code that doesn't work.

A couple of tips: always ensure that your HTML is valid and that all
attribute values are quoted, even when not strictly necessary.


Consider the following forms (both tested in Firefox and IE):

<form name="form1" action=""
onclick="this.Checkbox1.checked=this.Radio1[0].checked;">
<div>
<input type="radio" name="Radio1" value="Option1">
<input type="radio" name="Radio1" value="Option2">
<input type="checkbox" name="Checkbox1">
</div>
</form>

Note that when included in the onclick attribute of the form, 'this'
refers to the form so 'this.Checkbox1' refers to the checkbox. It is
equivalent to - document.forms['form1'].Checkbox1.

Note also that because there are two radio buttons named 'Radio1',
this.Radio1 returns a collection so to get the first one, I've used
this.Radio1[0].

Also note that I think it's pretty impractical, but serves for
demonstration purposes.


Now consider this version:

<form name="form1" action="">
<div>
<input type="radio" name="Radio1" value="Option1"
onclick="this.form.Checkbox1.checked=this.checked;">
<input type="radio" name="Radio1" value="Option2">
<input type="checkbox" name="Checkbox1">
</div>
</form>


Now 'this' refers to the radio button, not the form. So this.form
refers to the form attribute of the radio button, which is form1 and
this.form.Checkbox1 refers to Checkbox1.

Similarly, this.checked is the checked property of the radio button.

Also pretty useless in real life.