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

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

  1. 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>

    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!
    newjazzharmony, Mar 21, 2006
    1. Advertisements

  2. newjazzharmony

    RobG Guest

    said on 22/03/2006 8:35 AM AEST:
    The trivial answer is to put an onclick attribute on the radio button to
    check the checkbox:

    <input type="radio" name="Radio1" value="Option1"

    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=""

    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?
    RobG, Mar 21, 2006
    1. Advertisements

  3. 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?


    newjazzharmony, Mar 22, 2006
  4. newjazzharmony

    RobG Guest

    said on 23/03/2006 1:00 AM AEST:
    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.

    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=""
    <input type="radio" name="Radio1" value="Option1">
    <input type="radio" name="Radio1" value="Option2">
    <input type="checkbox" name="Checkbox1">

    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

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

    Now consider this version:

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

    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.
    RobG, Mar 23, 2006
    1. Advertisements

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.