标题复选框检查gridview行，但界面显示其他

Posted 2023-03-05

【中文标题】标题复选框检查gridview行，但界面显示其他

【英文标题】：Header checkbox checks gridview rows however interface shows otherwise

【发布时间】：2014-01-06 20:51:45

【问题描述】：

我在更新面板（网络表单）中有一个网格视图。网格视图有一个标题复选框，因此当您单击标题复选框时，它会检查其下方的所有项目复选框，如下所示：

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

这是在 script 标签内的 document.ready 之后声明的。当我最初加载页面并单击标题复选框时，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">

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

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

我的问题是 UI 没有改变，这意味着即使标记显示为已选中，复选框也不会显示为已选中。这是因为在更新面板中吗？

我能做些什么来解决这个问题？

【问题讨论】：

尝试使用 jQuery prop 而不是 attr，它接受 bool 值而不是 attr/removeAttr 检查

@Irvin 是的，可以工作$(this).prop('checked', source.checked);

【参考方案1】：

尝试使用 jQuery prop 而不是 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: "" );
        );
    

【讨论】：

我仍然不明白为什么这行得通以及为什么我所做的没有奏效......但你的作品......

我认为因为 prop 在任何情况下都可以使用布尔值；要使用 attr 添加/删除选中状态，您必须使用 attr 添加和 removeAttr 删除属性。

【参考方案2】：

你可以在你的 javascript 中使用 this.checked

    function toggleSelection(source) 
        $("#MainContent_gvCG input[id*='chkSelector']").each(function (index) 
            this.checked = source.checked;
        );
    

或Irvin Dominin aka Edward 评论

    $(this).prop('checked', source.checked);

【参考方案3】：

复选框通常很棘手，因为它们有多种更改值的模式，例如使用键盘\鼠标等。我推荐以下方法（已在生产环境中成功使用以前版本的 jquery）：

  $("[id$='chkSelector']").on('change', function ()  
    if ($(this).is(':checked'))
      $(this).css( backgroundColor: "yellow" );
    else
      $(this).css( backgroundColor: "" );
  );

然后在你的“Toggle all button”中，你可以触发状态改变：

 $("[id$='chkSelector']").each(function (index) 
   $(this).prop('checked', !$(this).is(':checked')); 
);

【参考方案4】：

当你使用* 时，它会找到所有id 中包含chkSelector 的复选框。

使用$ 而不是*，它将找到所有以chkSelector 结尾的复选框。

gridview 中的控件在渲染时将在 id 属性的末尾添加clientid。

使用您的代码：

function toggleSelection(source) 
        $("[id$='chkSelector']").each(function (index)  //Use $ here insted of *
            $(this).prop('checked', source.checked);//also use prop instead of attr
            if (source.checked)
                $(this).css( backgroundColor: "yellow !important" );//also use !important
            else
                $(this).css( backgroundColor: "" );
        );
    

【讨论】：

为什么要使用!important？它设置为样式属性，因此它具有最高优先级

可能是某种风格必须超越所以..我认为