asp.net全选/无复选框[重复]答案

【问题标题】：asp.net select all/none checkboxes [duplicate]asp.net全选/无复选框[重复]
【发布时间】：2012-07-26 00:11:18
【问题描述】：

可能重复：
Javascript or Jquery to check and uncheck all checkbox

我在一个页面上有 12 个 asp:checkboxes，我想添加一个选择/取消选择所有这些复选框。最好的方法是什么？

我见过有人使用 jquery，但我对 JS 不是很熟悉。是否有通用的 jquery 函数可供使用？

<head>...
   <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
...</head>

<body>...
    <script type="text/javascript">
        function Selectall() {
            if ($('.JchkAll').is(':checked')) {
                // .JchkGrid cssClass will be assigned to all other checkboxes in your control 
                $('.JchkGrid').attr('checked', 'true');
            }
            else {
                $('.JchkGrid').removeAttr('checked', 'false');
            }
        } 
    </script>
<form>...
<asp:CheckBox runat="server" ID="cbSelectAll" Text="Select/Deselect All" CssClass="JchkAll" onchange="Selectall();"/>
        <asp:CheckBox runat="server" ID="cbName" Text="Name" class="JchkGrid"/>
        <asp:CheckBox runat="server" ID="cbModel" Text="Model" CssClass="JchkGrid"/>
...</form>
...</body>

【问题讨论】：

见stackoverflow.com/questions/4177159/…
不完全是，我需要一种方法来处理 asp:checkbox 类型，而不是 input 类型

标签： c# jquery asp.net checkbox

【解决方案1】：

给你的 chckbox 一个 css 类，然后试试这个方法

// .JchkAll is cssclass of your checkbox on which's click you need to check all Checkboxes

function Selectall() {
  if ($('.JchkAll').is(':checked')) {
   // .JchkGrid cssClass will be assigned to all other checkboxes in your control
    $('.JchkGrid').attr('checked', 'true');
  }
  else {
    $('.JchkGrid').removeAttr('checked', 'false');
  }
}

编辑：

另外不要忘记在复选框的 onchange 属性中添加这个。

<asp:CheckBox runat="server" onchange="Selectall();" ID="cbSelectAll" 
     Text="Select/Deselect All" CssClass="JchkAll"/>

但这会给你一个编译器警告......如果你在 Page_Load 事件后面的代码中添加它会更好

    cbSelectAll.Attributes.Add("onchange","Selectall");

【讨论】：

JchkGrid 将是每个复选框的 CSS 类，而 JchkAll 将是选择/取消选择所有复选框的 CSS 类？
我没有得到任何快乐。以下是复选框的完成方式：<asp:CheckBox runat="server" ID="cbSelectAll" Text="Select/Deselect All" CssClass="JchkAll"/> <asp:CheckBox runat="server" ID="cbName" Text="Name" Checked="true" CssClass="JchkGrid"/>
你忘记添加
哦，是的。我刚刚添加了，但还是不行。我的头部有<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>，身体中有<script> 中的jquery。听起来不错？
是的，顺便说一句，它应该可以工作...尝试检查您的 css 类，它必须不区分大小写...

【解决方案2】：

首先找到所有复选框，然后更改它们。这是您通过 javascript 在客户端完成的。例如，这是一个函数，如果你调用它，它会检查页面上的所有复选框。

function SwapCheck()
{   
    // find them
    var allChecks = jQuery('input[type=checkbox]');

    allChecks.each( function() {
        jQuery(this).prop("checked", !this.checked);
        // use this for jQuery ver 1.6 and before
        // jQuery(this).attr("checked", !this.checked);
    });     
}

如果你想消除一些复选框，然后用 span 或 div 扭曲它们并使用

jQuery('#DivIDWithChecksToSelect input[type=checkbox]');

如果您想检查所有内容，可以使用此代码

jQuery(this).attr("checked", "checked");

您也可以使用jQuery(this).prop("checked", false); 取消选中它们。

亲戚：
Setting "checked" for a checkbox with jQuery?
Check all CheckBoxes in GridView

关于.attr() 和.prop() 在这里阅读：http://api.jquery.com/prop/

【讨论】：

我做了 jQuery(this).prop("checked", !this.checked);
@HughSeagraves 感谢您的注意，这是 4 年前的非常老的答案，在 1.6 版之后，prop() 方法更好

【解决方案3】：

为您的复选框指定一个 CssClass 名称（在我的示例中为 chk_group），并为您的复选框指定另一个 CssClass 名称（在我的示例中为 chk_select_all）

那么你可以试试这个 jQuery 代码

$(document).ready(function(){
    $(".chk_select_all input[type=checkbox]").click(function(){
       $(".chk_group input[type=checkbox]").attr('checked', this.checked); 
    });
 });

在这里查看工作版本：http://jsfiddle.net/a2XeK/

在 ASP.NET WebForms 中，您必须使用选择器 .chk_select_all input[type=checkbox]，因为渲染引擎会创建一个带有 css 的样式，并且在 span 内会有实际的复选框。

【讨论】：

无法让它为 asp:checkboxes 工作
但是输入 type=checkbox 可以正常工作，如何让 asp:checkbox 也可以工作？
我看到 asp.net 将复选框呈现为 span 标签，并将样式类分配给 span。我正在用注释更新我的解决方案。

【解决方案4】：

有多种方法可以做到这一点。看看哪个最适合你。使用 JavaScript

function toggleCheckboxes(flag) {    
    var form = document.getElementById('groupImportForm');
    var inputs = form.elements;
    if(!inputs){
        //console.log("no inputs found");
        return;
    }
    if(!inputs.length){
        //console.log("only one elements, forcing into an array");
        inputs = new Array(inputs);        
    }

    for (var i = 0; i < inputs.length; i++) {  
      //console.log("checking input");
      if (inputs[i].type == "checkbox") {  
        inputs[i].checked = flag;
      }  
    }  
}

希望这会有所帮助。

【讨论】：

【解决方案5】：

如果需要，您可以在代码隐藏中执行此操作。在主复选框的 OnCheckedChanged 事件中，将复选框的所有 Checked 变量设置为 true。

【讨论】：

它可以在客户端轻松完成...无需在客户端迭代控制...
已经尝试过了，但需要一种方法来完成回发。