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个事件。因此，当点击unchecked复选框时，会触发这两个操作：

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

所以它是一个基本的反作用动作，取消了复选框的默认动作。要解决此问题，您必须检查默认目标是否不是复选框，然后运行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/

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

1 个答案: