突出显示表格行并在表格行单击jQuery时选择单选输入

Yuri Tupizin 发表于 Dev

尤里·图皮津

我试图实现类似这样：我想选择一个无线输入并突出显示表行，当有人点击该表.Same想法冥冥中这一点，但与无线输入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");
        }
    });
});

戴维·康拉德

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。