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

Discussion in 'Javascript' started by newjazzharmony@hotmail.com, Mar 21, 2006.

  1. Guest

    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
     
    , Mar 21, 2006
    #1
    1. Advertising

  2. RobG Guest

    Re: Automatically selecting a checkbox based on the value of a radiobutton

    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?


    --
    Rob
     
    RobG, Mar 21, 2006
    #2
    1. Advertising

  3. Guest

    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
     
    , Mar 22, 2006
    #3
  4. RobG Guest

    Re: Automatically selecting a checkbox based on the value of a radiobutton

    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.


    --
    Rob
     
    RobG, Mar 23, 2006
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. John Criswell
    Replies:
    1
    Views:
    1,413
    John Criswell
    Jul 24, 2003
  2. Vikas Kumar

    selecting radio button in datalist

    Vikas Kumar, Apr 25, 2006, in forum: ASP .Net
    Replies:
    15
    Views:
    5,838
    Steven Cheng[MSFT]
    May 3, 2006
  3. sp
    Replies:
    3
    Views:
    473
    Joseph Kesselman
    Feb 7, 2006
  4. Hiten
    Replies:
    1
    Views:
    700
    Vidar Petursson
    May 26, 2004
  5. David
    Replies:
    5
    Views:
    1,796
    Scott Sauyet
    Jul 28, 2011
Loading...

Share This Page