单击父项时选择收音机答案

【问题标题】：Select radio when click on parent单击父项时选择收音机
【发布时间】：2013-04-13 11:53:43
【问题描述】：

我在这样的表格中有单选按钮

<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>

和 jQuery 代码

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

目的是在单击它所在的行时选择一个收音机，它可以工作，但每个收音机只有一次。

例如，您选择第一个，然后单击第二个，如果您再次尝试选择第一个，它将不起作用。

我使用的解决方案被接受为在 this question 中工作，但不再完美工作。

我也尝试使用 removeAttr 代替注释行，结果相同。

http://jsfiddle.net/NsDnh/

【问题讨论】：

标签： jquery radio-button

【解决方案1】：

试试这个

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

【讨论】：

【解决方案2】：

问题是attr()与jQuery 1.9+版本不兼容的问题。

从 jQuery 1.6 开始，.attr() 方法返回未定义的属性尚未设置。检索和更改 DOM 属性，例如表单元素的选中、选择或禁用状态，使用 .prop() 方法。

尝试改用prop：

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

Updated Demo

【讨论】：

【解决方案3】：

试试下面的代码。

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

jsFiddle

【讨论】：