标题复选框检查gridview行,否则界面显示

Question

我在更新面板(网络表单)中有一个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在script标签之后声明的.当我最初加载页面并单击headercheckbox时,也会选择gridview中的所有行(很棒......有效).如果我取消选中它,所有行都将被取消选中(很棒).当我再次点击它时,UI不会改变(所有项目都不会像它们应该那样被检查).

我很好奇,在检查标记时也是对的,当我点击标题将其检查为true时,我得到了检查的行项:

<input id="MainContent_gvCG_chkSelector_5" type="checkbox" name="ctl00$MainContent$gvCG$ctl08$chkSelector" style="background-color: rgb(255, 255, 0);" checked="checked">

当我取消选中标题时,它会像这样正确响应:

<input id="MainContent_gvCG_chkSelector_5" type="checkbox" name="ctl00$MainContent$gvCG$ctl08$chkSelector" style="">

我的问题是UI没有改变,这意味着即使标记显示正在检查,复选框也不会显示为被检查.这是因为在更新面板内吗？

我该怎么做才能解决这个问题？

Answer 1

尝试使用 jQueryprop而不是attr，它接受布尔值而不是使用 attr/removeAttr 检查属性。

代码：

    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: "" });
        });
    }