How to select all checkbox using jquery or javascript?

Question

I have multiple checkboxes , there is a checkbox with select all name, now i want that when some tick the select all checkbox, then all the checkbox must be selected. I think this will be in jquery. any tutorial link or codes with hints would be appreciated.the code snip is under...

<input type="checkbox" value="">Select All<br/>
<input type="checkbox" value="">A<br/>
<input type="checkbox" value="">B<br/>
<input type="checkbox" value="">C<br/>
<input type="checkbox" value="">D<br/>
<input type="checkbox" value="">E<br/> 
<input type="checkbox" value="">F<br/>
<input type="checkbox" value="">G<br/>
<input type="checkbox" value="">H<br/>

acdcjunior · Answer 1 · 2014-12-20T03:44:59.770

This should check all checkboxes when you check the "Select All" one, and also uncheck all checkboxes when you uncheck it.

$("#selectAll").click(function () {
    $(":checkbox").not(this).prop("checked", $(this).is(":checked"));
});

If you don't want the uncheck behavior:

$("#selectAll").click(function () {
    if ($(this).is(":checked")) {
        $(":checkbox").not(this).prop("checked", true);
    }
});

But of course, you must identify it. Do it by adding the id="selectAll" attribute (or any other id you wish, just make sure you change the JavaScript code as well):

<input type="checkbox" value="" id="selectAll">Select All<br/>
<input type="checkbox" value="">A<br/>
<input type="checkbox" value="">B<br/>
<input type="checkbox" value="">C<br/>
<input type="checkbox" value="">D<br/>
<input type="checkbox" value="">E<br/> 
<input type="checkbox" value="">F<br/>
<input type="checkbox" value="">G<br/>
<input type="checkbox" value="">H<br/>

Abdul Muheet · Accepted Answer · 2014-12-20T03:43:26.480

<input type="checkbox" id="exp" />Tick All Checkbox<br/>
<input type="checkbox" value="demo1" class="subchkbox"/>No 1<br/>
<input type="checkbox" value="demo2" class="subchkbox"/>No 2<br/>
<input type="checkbox" value="demo3" class="subchkbox"/>No 3<br/>
<input type="checkbox" value="demo4" class="subchkbox"/>No 4<br/>
<input type="checkbox" value="demo5" class="subchkbox"/>No 5<br/>

<sctipt type="text/javascript">
/*Include the jquery library 1.9.1*/
  $(document).ready(function() {
  $('#exp').click(function(event) {  
    if(this.checked) { 
        $('.subchkbox').each(function() { 
            this.checked = true;       
        });
    }else{
        $('.subchkbox').each(function() { 
            this.checked = false;                   
        });         
    }
  });

  });
[the fiddle is here][1]

Shouldn't have to use `.each` - just do `$('.subchkbox').prop("checked", this.checked)` - either way - +1 for the common classes and the ID on the select all. — tymeJV, Dec 20 '14 at 03:37

potashin · Answer 3 · 2014-12-20T03:44:02.637

2

Using jQuery :

 $("input[type=checkbox]").prop({ checked : true })

JSFiddle

Using pure JavaScript :

var inputs = document.querySelectorAll('input[type=checkbox]')
Object.keys(inputs).forEach(function(i){
   inputs[i].checked = true
})

JSFiddle

edited Dec 20 '14 at 03:44

answered Dec 20 '14 at 03:33

potashin

44,205
11
83
107

score 0 · Answer 4 · answered Dec 20 '14 at 03:34

0

$("checkboxContainer").find("input[type='checkbox']").each(function() {
    $(this).prop("checked", true);
});

I think using .find() is faster when selecting multiple elements.

answered Dec 20 '14 at 03:34

score 0 · Answer 5 · answered Dec 20 '14 at 03:44

If you want to do this in plain JS, it's also pretty simple.

You just have to loop through all of the inputs and set checked to true (or false), which isn't very efficient.

document.getElementById("all").addEventListener("change", function() {
  if (this.checked) {
    var boxes = document.getElementsByTagName("input");
    for (var i = 0; i < boxes.length; i++) {
      if (boxes[i].type === "checkbox") {
        boxes[i].checked = true;
      }
    }
  } else {
    var boxes = document.getElementsByTagName("input");
    for (var i = 0; i < boxes.length; i++) {
      if (boxes[i].type === "checkbox") {
        boxes[i].checked = false;
      }
    }
  }
});

<input type="checkbox" value="" id="all">Select All
<br/>
<input type="checkbox" value="">A
<br/>
<input type="checkbox" value="">B
<br/>
<input type="checkbox" value="">C
<br/>
<input type="checkbox" value="">D
<br/>
<input type="checkbox" value="">E
<br/>
<input type="checkbox" value="">F
<br/>
<input type="checkbox" value="">G
<br/>
<input type="checkbox" value="">H
<br/>

score 0 · Answer 6 · answered Dec 20 '14 at 04:22

Derived from the current answer marked as correct, it can all be much simpler:

$(document).ready(function()
{
    $('#exp').click(function(event)
    {
        $('.subchkbox').prop({
            checked: $(this).prop('checked')
        });    
    });    
});

How to select all checkbox using jquery or javascript?

6 Answers6

JSFiddle

JSFiddle