Selecting radio button when table-row is clicked

[grimski]

I’m hoping someone can help with this. I have a table layout, each row is essentially a variation of a product. When clicked it should highlighted/selected. It will also need to check a checkbox so a form can be submitted.

http://codepen.io/moy/pen/NxeqoW

The checkboxes aren’t actually visible in the mock-up, so they’d need to be hidden but I’ve left them visible for now. So they wouldn’t actually need their own <td> if that makes life any easier.

Cheers!

[grimski]

Aside from the selected class needed on the <tr> I’ve managed to get this ‘working’ using the following script:

$('.product-options tr').click(function() {
    $(this).find('td input[type=radio]').prop('checked', true);
   // $(this).find('td .radio span').addClass('checked', true);
});

One side issue I have is I use uniform.js to style my selects, radio and checkboxes. This wraps radio buttons like so (so they can be styled):

<div class="radio">
    <span class="checked">
        <input type="radio" name="product_variation" checked="checked" />
    </span>
</div>

<div class="radio">
    <span>
        <input type="radio" name="product_variation" />
    </span>
</div>

Clicked directly on the radio button changes the checked class accordingly on the radio div/span. But if you click a table row, it does not. How could I go about ensuring the checked class (styling) on .radio span matches that of the input?

[bearhead]

Maybe this works for you:

http://codepen.io/kvana/pen/adMLpb

[grimski]

Thanks a lot, looks really simple when you put it like that!

Sometimes I think I overcomplicate javascript (in my head). I thought I’d need if/else statements to achieve this or nest code within a parent for each status.

[Author]

Posts