CODEWITHSUNDEEP
javascriptjqueryhtml
jShoop
jShoop

Reputation: 411

Setting radio button checked true on button click

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!

Upvotes: 1

Views: 2736

Answers (2)

Negom
Negom

Reputation: 318

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

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

Upvotes: 2

Drummad
Drummad

Reputation: 722

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);
}

Upvotes: 1

Related Questions