asp.net select all/none checkboxes

c# jquery asp.net checkbox

14,197

Solution 1

Give your chckbox a css class and try this way

// .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');
  }
}

Edit:

Also Don't forget to add this on checkbox's onchange attribute..

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

But this will give you a compiler warning...it would be better if you add it from code behind on Page_Load event like

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

Solution 2

First you find all the checkboxes, and then you change them. This you done on client via javascript. For example this is a function that if you call it is check all the chekboxes on a page.

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

If you like to eliminate some checkboxs then warp them with a span, or div and use the

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

If you like to check them all you can use this code

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

Also you can use the jQuery(this).prop("checked", false); to uncheck them.

relative:
Setting "checked" for a checkbox with jQuery?
Check all CheckBoxes in GridView

About the .attr() and the .prop() read here : http://api.jquery.com/prop/

Solution 3

Give your checkboxes one CssClass name (chk_group in my example), and the give your check box that will change all of them another CssClass name (chk_select_all in my example)

then you can try this jQuery code

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

Check here a working version: http://jsfiddle.net/a2XeK/

In ASP.NET WebForms, you'll have to use the selector .chk_select_all input[type=checkbox] because the rendering engine will create a with css style, and inside the span there will be the actual checkbox.

14,197

Author by

user1468537

Updated on June 22, 2022

Comments

user1468537 almost 2 years

Possible Duplicate:
Javascript or Jquery to check and uncheck all checkbox

I have 12 asp:checkboxes on a page and I would like to add one which selects/deselects all of them. What's the best way to do that?

I've seen people use jquery but I'm not very familiar with JS. IS there a generic jquery finction to use?

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