Question

我正在努力实现与此类似的东西：我想选择一个无线电输入，并在有人点击表格中的某个位置时突出显示一个表格行。这个想法就是这个，但有无线电输入 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");
        }     
    });
});

分叉小提琴 - ＆gt;的 http://jsfiddle.net/48o1kycu/

当表行单击jquery时，突出显示表行并选择无线电输入

1 个答案: