javascript - jquery 问题与 tr 单击更改复选框

Question

我的情况:我里面有一个复选框 <tr> , 写在 <asp:repeater>在用户控件上，放置在 aspx 页面中。

我的目标:当<tr>单击时，JQuery 更改(或具体来说，切换)复选框选中属性以及 <tr> 的 css 类本身。

我已经尝试了几种方法，到目前为止，只有这个对我有用:http://jsfiddle.net/xixonia/WnbNC/，但不幸的是，所有复选框都被切换而不是仅选中一个，就像 jsfiddle.net 上的示例一样。此外，如果我单击复选框本身，则会选中所有其他复选框而不是单击的复选框。

我做了什么:

    $(".moduleTableItem").click(function (e) {
        // Toggles CSS
        if (!$(this).closest('tr').hasClass("tr.active")) {
            $(this).closest('tr').css('background-color', 'blue');
            $(this).closest('tr').addClass("tr.active");
        } else {
            $(this).closest('tr').css('background-color', 'red');
            $(this).closest('tr').removeClass("tr.active");
        }
        // Toggles Checkbox
        $(':checkbox').prop('checked', function (i, value) {
            return !value;
        });

ASP:

<asp:Repeater ID="repModuleGeneral" runat="server" EnableViewState="true">
                    <ItemTemplate>
                        <tr id="trModuleGeneral" class="moduleTableItem" runat="server">
                            <td>
                                    <input type="checkbox" id="cbxSelect" class="cbxSelect"  runat="server" autopostback="false" /></td>
                            <td>
                                <asp:Label ID="lblNo" runat="server" /></td>
</tr>
                    </ItemTemplate>
                </asp:Repeater>

这是我的第一个问题。如果我的问题有点不清楚，请告诉我。任何代码片段或工作解决方案将不胜感激。

谢谢。

Answer 1

改变

 $(':checkbox').prop('checked', function (i, value) {

到

$(this).find(':checkbox').prop('checked', function (i, value) {

这里使用的

this会指向当前点击的tr。

如果您直接单击复选框，这将不起作用。你为什么问？因为 checkbox 位于 tr 内，您已为其分配了一个 click 事件。因此，当单击一个未选中 的复选框时，将触发这两个操作:

1. 由于默认复选框操作而选中复选框 - 复选框设置为 true。
2. 触发了对 tr 的点击。你在那里有一个复选框 prop 事件。恢复默认操作完成的选择。

所以它是一个基本的反 Action ，它取消了复选框的默认 Action 。要纠正此问题，您必须检查默认目标是否不是复选框，然后运行 ​​prop 函数:

$(".moduleTableItem").click(function (e) {    

    // Toggles CSS
    if (!$(this).closest('tr').hasClass("tr.active")) {
        $(this).closest('tr').css('background-color', 'blue');
        $(this).closest('tr').addClass("tr.active");
    } else {
        $(this).closest('tr').css('background-color', 'red');
        $(this).closest('tr').removeClass("tr.active");
    }
    //check here
    if (!$(e.target).is(":checkbox")) {
        // Toggles Checkbox
        $(this).find(':checkbox').prop('checked', function (i, value) {
            return !value;
        });
    }
});

演示:http://jsfiddle.net/hungerpain/Kph8M/

但是，正如一个侧面的想法，如果您可以控制通过复选框生成的 ID，则可以分配与标签中的 for 属性相同的 ID。您的 HTML 看起来像这样:

 <tr class="moduleTableItem">
        <td>
            <input type="checkbox" id="cbxSelect1" class="cbxSelect" />
        </td>
        <td>
            <label for="cbxSelect1">Text</label>
        </td>
 </tr>

不是复选框的id属性和标签的for属性。这样会解决很多麻烦。您可以使用复选框的 change 事件。另外，对您的代码进行了一些优化。它看起来像这样:

$(".moduleTableItem :checkbox").change(function (e) {
    //cache this - you are using it more than once.
    var $tr = $(this).closest('tr');
    // check if class is active - I took away if..else and made it ternary
    var bg = $tr.hasClass("tr.active") ? 'red': 'blue';   
    //set css and toggleClass. Anyway you're switching everytime. Why not use toggle?
    $(this).closest('tr').css('background-color', bg).toggleClass("tr.active");
});

演示:http://jsfiddle.net/hungerpain/Kph8M/4/