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

Question

ASP.NET 代码

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

查询

<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 的第一个条目。

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

知道我做错了什么吗？

Answer 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是由更改事件触发的复选框。

Answer 2

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

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

Answer 3

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