Reputation: 411
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
Reputation: 318
Here is an example : http://jsfiddle.net/xhhLja7m/
$(".choice-option").click(function()
{
$(this).find('input[type=radio]').prop("checked", "true");
})
Upvotes: 2
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