How to check all Checkboxes using jQuery

Question

I'm Trying to check all elements if checkbox input type, I tried different solutions but it didn't work, I know this is simple, but I don't know what is wrong with my code:

<ul class="items">
  <li class="item checkall">
    <label>
      <input type="checkbox" name="item[]" id="checkAll">
      <span></span>
      <p>Check All Items</p>
    </label>
  </li>
  <li class="item">
    <label>
      <input type="checkbox" name="item[]" id="checkbox" value="1">
      <span></span>
      <p>Learn HTML5.1</p>
    </label>
  </li>
  <li class="item">
    <label>
      <input type="checkbox" name="item[]" id="checkbox" value="2">
      <span></span>
      <p>Learn PHP7</p>
    </label>
  </li>
  <li class="item">
    <label>
      <input type="checkbox" name="item[]" id="checkbox" value="4">
      <span></span>
      <p>Program a Website</p>
    </label>
  </li>
</ul>

jQuery :

$(".checkall").click(function () {
  $('input:checkbox').not(this).prop('checked', this.checked);
});

First use class instead of id. id must be unique and use `#id` for select an id and `.class` for select a class. And if you look better there's a lot of others question like you http://stackoverflow.com/questions/18537609/jquery-checkbox-check-all ; http://stackoverflow.com/questions/15504643/check-uncheck-all-checkboxes-with-another-single-checkbox-use-jquery — Alexis, Feb 09 '17 at 12:37
Yes. It's simple. So, my question is: if you want to check all checkboxes, why do you need `not(this)` statement? — Tân, Feb 09 '17 at 12:37
@Alexis I have looked for different questions, but I couldn't make it. — Maohammed Hayder, Feb 09 '17 at 12:41
May it help! [fiddle](https://jsfiddle.net/pandeyvishal1986/z6sq1thx/#&togetherjs=o7bakMsrtA) — RonyLoud, Feb 09 '17 at 12:41
Where is you `.checkall` element? Is it a button or `checkbox`? — Samir, Feb 09 '17 at 12:42
First of all, your code is not valid. I suggest you to take a quick tutorial about HTML and JS. Otherwise, you will meet a lot of problems like this one. — er-han, Feb 09 '17 at 12:45

score 6 · Accepted Answer · answered Feb 09 '17 at 12:42

id for each element in a HTML page have to be unique. So either keep unique id or provide class for checkbox instead of id and class can be same. No uniqueness to maintain with class.

Attach on click/change event to .checkAll checkbox which has been changed to class here instead of id and set all .checkbox property based on the checked property of .checkAll checkbox. Below is the snippet.

$(".checkAll").on('change',function(){
  $(".checkbox").prop('checked',$(this).is(":checked"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="items">
  <li class="item checkall">
    <label>
      <input type="checkbox" name="item[]" class="checkAll">
      <span></span>
      <p>Check All Items</p>
    </label>
  </li>
  <li class="item">
    <label>
      <input type="checkbox" name="item[]" class="checkbox" value="1">
      <span></span>
      <p>Learn HTML5.1</p>
    </label>
  </li>
  <li class="item">
    <label>
      <input type="checkbox" name="item[]" class="checkbox" value="2">
      <span></span>
      <p>Learn PHP7</p>
    </label>
  </li>
  <li class="item">
    <label>
      <input type="checkbox" name="item[]" class="checkbox" value="4">
      <span></span>
      <p>Program a Website</p>
    </label>
  </li>
</ul>

score 1 · Answer 2 · answered Feb 09 '17 at 12:43

Change your js to this:

$(".checkall").click(function (e) {
  $('input[type="checkbox"]').not(this).prop('checked', this.checked);
});

And add class to your input not to li element:

<input class="checkall" type="checkbox" name="item[]" id="checkAll">

Here is fiddle

score 0 · Answer 3 · answered Feb 09 '17 at 12:45

0

$(".checkall").click(function (e) {

  var list = $(e.target).parents('ul');
  $('li:gt(0) label input:checkbox',list).attr('checked', this.checked);

});

answered Feb 09 '17 at 12:45

hdkhardik

662
3
22

2

While this code snippet may solve the question, including an explanation of *how* and *why* this solves the problem [would really help](//meta.stackexchange.com/q/114762) to improve the quality of your post. Remember that you are answering the question for readers in the future, not just the person asking now! Please [edit] your answer to add explanation, and give an indication of what limitations and assumptions apply. – Toby Speight Feb 09 '17 at 13:33
@TobySpeight Ok sure, I will take care of these things next time on. – hdkhardik Feb 09 '17 at 13:42

How to check all Checkboxes using jQuery

3 Answers3