CODEWITHSUNDEEP
jqueryradio-button
Gustek
Gustek

Reputation: 3760

Select radio when click on parent

I have radio buttons in table like this

<form>
    <table class="table table-hover flights_table">
        <tr>
            <td>
                <input type="radio" class="flight" name="flight" />
            </td>
            <td>Fare type</td>
            <td>Price</td>
            <td>dep</td>
            <td>Arrival</td>
        </tr>
        <tr>
            <td>
                <input type="radio" class="flight" name="flight" />
            </td>
            <td>Fare type</td>
            <td>Price</td>
            <td>dep</td>
            <td>Arrival</td>
        </tr>
        <tr>
            <td>
                <input type="radio" class="flight" name="flight" />
            </td>
            <td>Fare type</td>
            <td>Price</td>
            <td>dep</td>
            <td>Arrival</td>
        </tr>
    </table>
</form>

and jQuery code

$('.flights_table tr').click(function (e) {
    //$('.flight').attr('checked', false);
    $(this).find('.flight').attr('checked', true);
});

the aim is to select a radio when clicked on row in which it is, and it works but only once for each radio.

e.g You select 1st then You click 2nd and If You try to select 1st again it doesn't work.

Solution I used was accepted as working in this question but doesn't work perfectly any more.

I tried with removeAttr as well in place of commented line same result.

http://jsfiddle.net/NsDnh/

Upvotes: 1

Views: 901

Answers (3)

user2246356
user2246356

Reputation:

Try this

 $('tr').click(function (e) {
 $(this).$(input:radio).prop('checked', true);
});

Upvotes: 2

Eli
Eli

Reputation: 14827

The problem is the incompatible issue of attr() with jQuery version 1.9+.

As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method.

Try using prop instead:

 $('.flights_table tr').click(function (e) {
     //$('.flight').attr('checked', false);
     $(this).find('.flight').prop('checked', true);
 });

Updated Demo

Upvotes: 1

Santosh
Santosh

Reputation: 12353

Try below code.

   $(this).find('.flight').prop('checked', true);

jsFiddle

Upvotes: 0

Related Questions