单击 table 行时突出显示 table 行和 select 单选输入 jquery

Question

我正在努力实现与此类似的目标：我想 select 一个无线电输入并在有人点击 table 中的某处时突出显示 table 行。同样的想法是这个但是有无线电输入 http://jsfiddle.net/FbHAV/2/

我能得到一些帮助吗？我应该在 Jquery 中更改什么？

HTML :

<table class="record_table">
<tr>
    <td>
        <input type="radio" />
    </td>
    <td>Hello</td>
    <td>Hello</td>
</tr>
<tr>
    <td>
        <input type="radio" />
    </td>
    <td>Hello</td>
    <td>Hello</td>
</tr>
<tr>
    <td>
        <input type="radio" />
    </td>
    <td>Hello</td>
    <td>Hello</td>
</tr>
<tr>
    <td>
        <input type="radio" />
    </td>
    <td>Hello</td>
    <td>Hello</td>
</tr>

Jquery :

$(document).ready(function () {
    $('.record_table tr').click(function (event) {
        if (event.target.type !== 'radio') {
            $(':radio', this).trigger('click');
        }
    });

    $("input[type='radio']").change(function (e) {
        if ($(this).is(":checked")) {
            $(this).closest('tr').addClass("highlight_row");
        } else {
            $(this).closest('tr').removeClass("highlight_row");
        }
    });
});

Answer 1

我认为主要问题是您忘记了对单选按钮进行分组，即

<input type="radio" name="test" />

然后这将在单击单选按钮和 <tr> 时都起作用：

$(document).ready(function () {
    $('.record_table tr').click(function (event) {
        if (event.target.type !== 'radio') {
            $(':radio', this).trigger('click');
        }
    });

    $("input[type='radio']").change(function (e) {
        e.stopPropagation();
        $('.record_table tr').removeClass("highlight_row");        
        if ($(this).is(":checked")) {
            $(this).closest('tr').addClass("highlight_row");
        }     
    });
});

分叉 fiddle -> http://jsfiddle.net/48o1kycu/

单击 table 行时突出显示 table 行和 select 单选输入 jquery

Highlight table row and select radio input when table row clicked jquery

html

php

jquery

radio-button