Question

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

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

我见过人们使用jquery，但我对JS不是很熟悉。是否有使用通用的jquery finction？

<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>

Answer 1

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

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/

Answer 2

给你的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");

Answer 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输入[type = checkbox]，因为渲染引擎将创建一个带css样式，并且在span中将有实际的复选框。

Answer 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;
      }  
    }  
}

希望这有帮助。

Answer 5

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

asp.net选择所有/无复选框

5 个答案: