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

Posted

技术标签:

【中文标题】Jquery 仅适用于 gridview 的第一个条目【英文标题】:Jquery only working for the first entry of the 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的问题,它只是反映颜色变化的第一个条目。也没有人可以在那里解决这个问题。 【参考方案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 背景

【讨论】:

以上是关于Jquery 仅适用于 gridview 的第一个条目的主要内容,如果未能解决你的问题,请参考以下文章

jQuery Text Resizing Plugin 仅适用于 Bootstrap Carousel 的第一张幻灯片

我的 select2 jquery 仅适用于第一种形式

Gridview 中的 Select2 插件仅适用于 asp.net 中的最后一行网格

覆盖 Android Backbutton 行为仅适用于具有 PhoneGap 的第一页

ASP .NET RowDataBound 属性仅适用于一行(第一行)

Jquery 动画仅适用于一个元素