当表格行单击jquery时突出显示表格行并选择单选输入答案

【问题标题】：Highlight table row and select radio input when table row clicked jquery当表格行单击jquery时突出显示表格行并选择单选输入
【发布时间】：2015-07-04 08:09:08
【问题描述】：

我正在尝试实现与此类似的目标：当有人单击表格中的某处时，我想选择一个无线电输入并突出显示一个表格行。同样的想法是这样，但有无线电输入 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>

查询：

$(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");
        }
    });
});

【问题讨论】：

到目前为止你尝试过什么？你能给我们展示一些你玩过的 jQuery 代码吗？你对你需要做什么有一个概念性的想法吗？
与此处相同的代码 :jsfiddle.net/FbHAV/2 只是试图更改收音机的复选框
如果可以避免，请不要链接到代码。拥有一个 jsfiddle 是一种很好的做法，但这里的用户应该能够在不离开页面的情况下查看尽可能多的必要信息。因此，请将最小的 sn-p 复制到您的答案中。
完成，添加 Jquery 代码。
您的代码有效jsfiddle.net/FbHAV/459。有什么问题？

标签： php jquery html radio-button

【解决方案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");
        }     
    });
});

分叉小提琴 -> http://jsfiddle.net/48o1kycu/

【讨论】：