asp.net select all/none checkboxes

Question

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>

See http://stackoverflow.com/questions/4177159/jquery-toggle-checkboxes-on-off — Kaido, Jul 27 '12 at 10:11
Not quite, I need a way to do it for asp:checkbox type, not input type — user1468537, Jul 27 '12 at 10:16

Mayank Pathak · Accepted Answer · 2012-07-27T10:30:40.543

3

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

edited Jul 27 '12 at 10:30

answered Jul 27 '12 at 10:13

Mayank Pathak

3,621
5
39
67

JchkGrid would be the CSS class for each checkbox, and JchkAll the CSS class for the checkbox which selects/deselects all? – user1468537 Jul 27 '12 at 10:15
I'm not getting any joy. Here is how the checkboxes are done: ` ` – user1468537 Jul 27 '12 at 10:23
you forgot to add – Mayank Pathak Jul 27 '12 at 10:26
oh yes. I have just added that but still no go. I have `` in the head, and the jquery in a ` – user1468537 Jul 27 '12 at 10:32
Yes, btw it should work...try check your css class and that must be case insensitive... – Mayank Pathak Jul 27 '12 at 10:35
I have it exactly as above, I get no warnings/errors at compile time, it just never ticks/unticks anything. – user1468537 Jul 27 '12 at 10:39
can you please post your code..by editing your first post.. – Mayank Pathak Jul 27 '12 at 10:45
you should keep your all the – Mayank Pathak Jul 27 '12 at 10:55
have tried it just now. still nothing. can't believe how something so simple be so annoying. – user1468537 Jul 27 '12 at 11:02
Well, Seems some problem from your end..I would recommend you to check all the things with cool mind okay...take it easy..if it doesn't gets fixed then no need to get annoyed Everyone is here to help you... – Mayank Pathak Jul 27 '12 at 11:06
Ok I have tried one of the other samples below http://jsfiddle.net/a2XeK/ which does work. Now how to get that work with the asp:checkbox type? – user1468537 Jul 27 '12 at 11:15
http://stackoverflow.com/questions/1543017/javascript-check-all-checkboxes-in-a-table-asp-net this seems to do the trick. thanks for the assist. – user1468537 Jul 27 '12 at 11:19

score 2 · Answer 2 · edited May 23 '17 at 12:07

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/

@HughSeagraves thank you for the note, this is very old answer 4 years ago, after ver 1.6 the prop() method is better — Aristos, Mar 08 '16 at 21:44

Raphael Gabbarelli · Answer 3 · 2012-07-27T11:37:04.140

1

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.

edited Jul 27 '12 at 11:37

answered Jul 27 '12 at 10:19

Raphael Gabbarelli

119
1
3

Can't get it to work for asp:checkboxes – user1468537 Jul 27 '12 at 10:35
but it works fine for input type=checkbox, how to make the asp:checkbox to work too? – user1468537 Jul 27 '12 at 10:53
I see that asp.net renders the checkbox into a span tag, and assigns the style class to the span. I'm updating my solution with a note. – Raphael Gabbarelli Jul 27 '12 at 11:34

score 0 · Answer 4 · answered Jul 27 '12 at 10:15

Multiple ways to do it. See which is best for you. Using 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;
      }  
    }  
}

Hope this helps.

score -2 · Answer 5 · answered Jul 27 '12 at 10:12

-2

You can do it in the codebehind if you want. In the OnCheckedChanged event of the main checkbox, set all of the Checked variables of the checkboxes to true.

answered Jul 27 '12 at 10:12

jdesai927

62
1
1
5

1

it can be done at client side easily...there is no need of iterating Control on client side... – Mayank Pathak Jul 27 '12 at 10:14
Have tried that but need a way to do it witohut postback. – user1468537 Jul 27 '12 at 10:14

asp.net select all/none checkboxes

5 Answers5