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>

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

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

知道我做错了什么吗？

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背景

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

3 个答案: