我在更新面板(网络表单)中有一个 GridView 。 GridView 有一个标题复选框,因此当您单击标题复选框时,它会检查其下方的所有项目复选框,如下所示:
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="HeaderLevelCheckBox" runat="server"
onclick="toggleSelection(this);" ToolTip="Select / Deselect all rows?" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chkSelector" runat="server" ToolTip="Select row?" />
</ItemTemplate>
</asp:TemplateField>
注意函数调用 onclick="toggleSelection(this);"
这看起来像这样:
function toggleSelection(source) {
$("#MainContent_gvCG input[id*='chkSelector']").each(function (index) {
$(this).attr('checked', source.checked);
if (source.checked)
$(this).css({ backgroundColor: "yellow" });
else
$(this).css({ backgroundColor: "" });
});
}
这是在脚本标签内的 document.ready 之后声明的。当我最初加载页面并单击 headercheckbox 时,gridview 中的所有行也被选中(很棒......有效)。如果我取消选中它,所有行都未选中(很棒的作品)。我再次点击它的那一刻,UI 没有改变(所有项目都没有按应有的方式检查)。
我很好奇,检查标记也是正确的,当我单击标题以检查它是否为真时,我得到了已检查的行项目:
<input id="MainContent_gvCG_chkSelector_5" type="checkbox" name="ctl00$MainContent$gvCG$ctl08$chkSelector" style="background-color: rgb(255, 255, 0);" checked="checked">
当我取消选中 header 时,它会像这样正确响应:
<input id="MainContent_gvCG_chkSelector_5" type="checkbox" name="ctl00$MainContent$gvCG$ctl08$chkSelector" style="">
我的问题是 UI 没有改变,这意味着即使标记显示为已选中,复选框也不会显示为已选中。这是因为在更新面板内吗?
我该怎么做才能解决这个问题?
最佳答案
尝试使用 jQuery prop
而不是 attr
,它接受一个 bool 值而不是使用 attr/removeAttr checked 属性。
代码:
function toggleSelection(source) {
$("#MainContent_gvCG input[id*='chkSelector']").each(function (index) {
$(this).prop('checked', source.checked);
if (source.checked)
$(this).css({ backgroundColor: "yellow" });
else
$(this).css({ backgroundColor: "" });
});
}
关于javascript - 标题复选框检查 gridview 行,但界面显示否则,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20662176/