Jquery 仅适用于 gridview 的第一个条目答案

【问题标题】：Jquery only working for the first entry of the gridviewJquery 仅适用于 gridview 的第一个条目
【发布时间】：2018-07-25 01:09:09
【问题描述】：

ASP.NET 代码

<asp:TemplateField HeaderText="Status">
    <ItemTemplate>
        <div id="divStatus" style="width:20px;background:red">
            <input type="checkbox" id="checkboxAttendanceStatus">
        </div>
    </ItemTemplate>
</asp:TemplateField>

jQuery

<script>
    $(document).ready(function () {
        $('#checkboxAttendanceStatus').on('change', function () {
            if ($('#checkboxAttendanceStatus').prop('checked'))
                $('#divStatus').css('background', 'green');
            else
                $('#divStatus').css('background', 'red');
        });
    });
</script>

我在 gridview 中有一个复选框，我想通过单击它来更改其颜色。

我使用了上面提到的 jquery，但它只适用于 gridview 的第一个条目。

所有复选框条目都没有相应地反映更改。

知道我做错了什么吗？

【问题讨论】：

Change checkbox background color on checkbox check and uncheck的可能重复
请不要发布重复的问题。如果您阅读了另一个问题的 cmets，您可能已经找到了问题的答案。
不是重复的。在那里我询问了复选框颜色更改jquery。但在这里我问的是gridview的问题，它只是反映颜色变化的第一个条目。也没有人可以在那里解决这个问题。

标签： jquery asp.net gridview

【解决方案1】：

不要让你的 jQuery 选择器基于 div id，它只会得到第一个。改用一个类并将您的 jquery 代码更改为：

<script>
    $(document).ready(function () {
        $('.checkboxClass').on('change', function () {
            if ($(this).prop('checked'))
                $(this).parent().css('background', 'green'); //Will get the parent div to change background color
            else
                $(this).parent().css('background', 'red');
        });
    });
</script>

变量this是change事件触发的复选框。

【讨论】：

我如何在页面加载时将所有复选框涂成红色？
如果您总是要加载所有复选框为红色的页面，您应该将复选框类添加到您的 CSS 并将其设置为红色
我做到了，但问题是当页面上发生一些回发时，即使选中了一些复选框，所有复选框都是红色的。
在这种情况下，您必须发布代码，以便我们现在可以准确地进行比赛，所以我认为这是一个不同的主题。您可以创建一个关于回发的新问题，该问题总是重置复选框颜色并在那里发布带有上下文的代码。如果您认为我的答案最适合您的问题，请标记为已接受的答案。

【解决方案2】：

你在重复 div id，所以 jquery 总是得到第一个，尝试按类做你的监听器。

id 在您的 html 中应该是唯一的。

【讨论】：

但是话又说回来，如果我将类用于 div，它会立即更改所有复选框的颜色，这是我不想要的。
你应该使用这个：this.css('background', 'green');

【解决方案3】：

ID 重复 n 导致仅调用第一个 ItemTemplate 的复选框，并且仅更改第一个 #divStatus 背景

【讨论】：