2

我的条件：我有一个内部复选框<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>

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

谢谢你。

4

1 回答 1

0

改变

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

至

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

this此处使用的将指向当前点击的tr.

如果您直接单击复选框，这将不起作用。你为什么问？因为在checkbox里面tr，你已经给它分配了一个click事件。因此，当单击复选框时，unchecked会触发这两个操作：

  1. 由于默认复选框操作而选中了复选框 - 复选框设置为true。
  2. 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;
        });
    }
});

演示： //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/

于 2013-08-03T11:31:38.023 回答