Setting radio button checked true on button click

Question

I have a table cell that lights up when selected. There will be many buttons on the page but only one choice can be made at a time. How can I make them mutually exclusive using hidden input radio tags? (in order to handle the group later)

    <td class="choice-option">
        <input type="radio" name="trainChoice" id="cheese0032" >
        <p>10€</p>
    </td>

<td class="choice-option">
        <input type="radio" name="trainChoice" id="cheese0033" >
        <p>7€</p>
    </td>

For the input tag I was thinking of putting an onclick event on the td like:

onclick="checked()==true;"

Also I was thinking an onclick for the and send it to a .js with a function to switch the radio button to true.

When the button is clicked the radio button doesn't toggle to true. How do I make it do that?

Any advice would help greatly, thanks in advance!

Negom · Accepted Answer · 2015-06-22 10:15:54Z

2

Here is an example : http://jsfiddle.net/xhhLja7m/

$(".choice-option").click(function()
{
    $(this).find('input[type=radio]').prop("checked", "true");
})

answered Jun 22, 2015 at 10:15

Negom

3181 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jShoop Over a year ago

That's it! That did it. The find() method is amazing.

Drummad · Accepted Answer · 2015-06-22 09:49:03Z

The radio button isn't necessarily required to achieve this. You might apply a class name (e.g. 'selected') to a td when it is clicked and remove this class from all td's at the same time. In this way you get the effect of one td being selected at any time. In jQuery:

$('.choice-option').click(function() {
    $('.selected').removeClass('selected');
    $(this).addClass('selected');
}

Where you will apply your selected styles with CSS to the class of 'selected'.

Edit: However, to use the radio buttons as you would like to then you could do this:

$('.choice-option').click(function() {
    $(this).find("input[name='trainChoice']").prop('checked', true);
}

Collectives™ on Stack Overflow

Setting radio button checked true on button click

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related