how to make a check all checkbox using jquery?

Question

What I'm looking for is when I check "all" all other elements are checked and when I uncheck it all others are unchecked.

$(".dropdown dt a").on('click', function() {
  $(".dropdown dd ul").slideToggle('fast');
});

$(".dropdown dd ul li a").on('click', function() {
  $(".dropdown dd ul").hide();
});

function getSelectedValue(id) {
  return $("#" + id).find("dt a span.value").html();
}

$(document).bind('click', function(e) {
  var $clicked = $(e.target);
  if (!$clicked.parents().hasClass("dropdown")) $(".dropdown dd ul").hide();
});

$('.mutliSelect input[type="checkbox"]').on('click', function() {

  var title = $(this).closest('.mutliSelect').find('input[type="checkbox"]').val(),
    title = $(this).val() + " ";

  if ($(this).is(':checked')) {
    var html = '<span title="' + title + '">' + title + '</span>';
    $('.multiSel').append(html);
    $(".hida").hide();
  } else {
    $('span[title="' + title + '"]').remove();
    var ret = $(".hida");
    $('.dropdown dt a').append(ret);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dl class="dropdown">
  <dt>
    <a>
      <span class="hida">Choisir :</span>
      <p class="multiSel"></p>
    </a>
    </dt>
  <dd>
    <div class="mutliSelect">
      <ul>
        <li> <input type="checkbox" name="ALL" value="All"> All</li>
        <li> <input type="checkbox" name="check_list[]" value="val1">val1</li>
        <li> <input type="checkbox" name="check_list[]" value="val2">val2</li>
        <li> <input type="checkbox" name="check_list[]" value="val3">val3</li>
      </ul>
    </div>
  </dd>
</dl>

https://jsfiddle.net/8kwb54md/1/

_"Why doesn't my code work?"_ requires a [mcve] which shows the actual problem **in the question itself** and not only a link to an external resource. — Andreas, Sep 30 '18 at 17:29
@Andreas sorry for that but HTML + CSS + Jquery code is 140 lines and cann't post it all in here !! — issam, Sep 30 '18 at 17:32
That's why we require a **minimal** example. Strip anything that isn't related to the problem. And as you can see on my edit it is absolutely possible to supply such a minimal example... — Andreas, Sep 30 '18 at 17:33
Possible duplicate of [Select all checkboxes with jQuery](https://stackoverflow.com/questions/2228382/select-all-checkboxes-with-jquery) — Heretic Monkey, Sep 30 '18 at 17:49
@Baldráni Please don't edit code in questions that radically; it makes the answers irrelevant. — Heretic Monkey, Sep 30 '18 at 17:50
How is it making the answers irrelevants since they all still worked. I just removed code which is not in direct relation with the question. I don't get your point there :/ @HereticMonkey — Baldráni, Sep 30 '18 at 17:54
@issam: (probably) irrelevant to your problem, but why are you declaring the `title` variable twice, and to different values? — David Thomas, Sep 30 '18 at 17:57
@Baldráni Just don't edit code in questions. See the [FAQ](https://meta.stackoverflow.com/q/260245). Post a comment and the OP can edit their own code. This is especially true when you have an answer on the question to avoid the appearance of doing something to make your own answer look better. — Heretic Monkey, Sep 30 '18 at 18:00

connexo · Answer 1 · 2018-09-30T17:41:28.073

I reduced your HTML to the list with the checkboxes:

document.querySelector('[name=ALL]').addEventListener('change', (e) => {
  let checkboxes = e.target.closest('ul').querySelectorAll('input[type=checkbox]');
  Array.from(checkboxes).forEach((cb) => {
    cb.checked = e.target.checked;
  });
})

<ul>
  <li> <input type="checkbox" name="ALL" value="All">All</li>
  <li> <input type="checkbox" name="check_list[]" value="val1">val1</li>
  <li> <input type="checkbox" name="check_list[]" value="val2">val2</li>
  <li> <input type="checkbox" name="check_list[]" value="val3">val3</li>
</ul>

If you insist on using jQuery, here you go:

$('[name="ALL"]').on('change', function() {
  var self = this;
  $(this).closest('ul').find('input[type="checkbox"]').each(function() {
    this.checked = self.checked;
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li> <input type="checkbox" name="ALL" value="All">All</li>
  <li> <input type="checkbox" name="check_list[]" value="val1">val1</li>
  <li> <input type="checkbox" name="check_list[]" value="val2">val2</li>
  <li> <input type="checkbox" name="check_list[]" value="val3">val3</li>
</ul>

@issam The StackOverflow way of saying "thanks" is upvoting. — connexo, Sep 30 '18 at 17:37
@connexo The Stack Overflow way is to mark questions as duplicates, not answer them... :P — Heretic Monkey, Sep 30 '18 at 17:51
@HereticMonkey I like to add non-jquery answers to jquery questions, though :) — connexo, Sep 30 '18 at 17:53

Baldráni · Answer 2 · 2018-09-30T17:37:02.900

1

You should look at each()

Here is a bit of help :

$('[name="ALL"]').on('click', function(){
    $('.mutliSelect input[type="checkbox"]').each(function(){
        $(this).prop('checked') ?  $(this).prop('checked','') : $(this).prop('checked','checked')
    })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="mutliSelect">
  <li> <input type="checkbox" name="ALL" value="All">All</li>
  <li> <input type="checkbox" name="check_list[]" value="val1">val1</li>
  <li> <input type="checkbox" name="check_list[]" value="val2">val2</li>
  <li> <input type="checkbox" name="check_list[]" value="val3">val3</li>
</ul>

edited Sep 30 '18 at 17:37

answered Sep 30 '18 at 17:31

Baldráni

5,332
7
51
79

And if he unchecks `ALL`? – connexo Sep 30 '18 at 17:32
The property checked is either `true` or `false`. – connexo Sep 30 '18 at 17:36
@Baldráni thanks dude it works perfectly but how about whene i uncheck "all" the rest are unchecked too – issam Sep 30 '18 at 17:37
@connexo I'm sorry but I don't get your point with your remark – Baldráni Sep 30 '18 at 17:39
`$(this).prop('checked','')` is setting `HTMLInputElement.prototype.checked` which is a **boolean** property on the element to an empty string. – connexo Sep 30 '18 at 17:45
Check my answer to see how to do it cleanly using jQuery. – connexo Sep 30 '18 at 17:47

score 0 · Answer 3 · 2018-09-30T17:40:47.987

0

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

This code will select the first input checkbox, hook it to the click event, then it will check all the remaining checkboxs but not the first one, if the first checkbox is checked it will check them all otherwise uncheck them all.

Bon courage.

edited Sep 30 '18 at 17:40

answered Sep 30 '18 at 17:36

mrc c tres gentil ;) – issam Sep 30 '18 at 17:38

score 0 · Answer 4 · answered Sep 30 '18 at 18:28

We need to uncheck all checkbox if any of the options are unchecked.

var checkBoxAll = $('ul li> input[name="ALL"]');
var checkBoxOptions = $('ul li> input:not([name="ALL"])');
checkBoxAll.on('change', function() {
  var self = this;
  $(this).closest('ul').find('input[type="checkbox"]').each(function() {
    this.checked = self.checked;
  })
})

// to check or uncheck All checkbox, if all the options are checked.
checkBoxOptions.on('change', function() {
    var isAllChecked = true;
  
  // to find if any of the options is false.
  $(this).closest('ul').find('li> input:not([name="ALL"])').each(function() {
    if (!this.checked) return isAllChecked = false;
  })
  
  checkBoxAll.get(0).checked = isAllChecked;
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li> <input type="checkbox" name="ALL" value="All">All</li>
  <li> <input type="checkbox" name="check_list[]" value="val1">val1</li>
  <li> <input type="checkbox" name="check_list[]" value="val2">val2</li>
  <li> <input type="checkbox" name="check_list[]" value="val3">val3</li>
</ul>

how to make a check all checkbox using jquery?

4 Answers4