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 的第一张幻灯片
Gridview 中的 Select2 插件仅适用于 asp.net 中的最后一行网格
覆盖 Android Backbutton 行为仅适用于具有 PhoneGap 的第一页