This question has already been answered:

How can I select or deselect all checkboxes at once, so that if I have already selected some checkboxes, it works correctly, that is, if I have two boxes, then when I click, everything is highlighted without inversion and vice versa?

Code example:

<input id="i1" type="checkbox" name="additional"> <label for="i1">Вариант №1</label> <br> <input id="i2" type="checkbox" name="additional"> <label for="i2">Вариант №2</label> <br> <input id="i3" type="checkbox" name="additional"> <label for="i3">Вариант №3</label> <br> <input id="i4" type="checkbox" name="additional"> <label for="i4">Вариант №4</label> <br> <input id="select_all" type="checkbox"> <label for="select_all">Выбрать / Снять Все</label>

Reported as a duplicate by participants by Alexey Shimansky , Grundy , sercxjo , Denis , Pavel Mayorov 23 Aug '16 at 10:23 .

A similar question was asked earlier and an answer has already been received. If the answers provided are not exhaustive, please ask a new question .

  • @Grundy is not at all. here again, not only remove, but invert;) - Alexey Shimansky
  • @ Alexey Shimansky, and here and not: P If I have two boxes selected, then when I click, everything is highlighted without inversion and vice versa? - Grundy
  • @Grundy I need it without inverting and that it works in both directions, all the proposed options are not suitable moderators - user192664
  • @JohnScott, that's just the second option - what you need if you replace the hard setting false with a parameter - Grundy

3 answers 3

Upd. with respect to the @Grundy comments, made the code shorter and less readable.

The checked checkbox attribute can be assigned:

 document.getElementById('select_all') .addEventListener('click', function (e) { var els = document.querySelectorAll( 'input[name=additional]' ); Array.prototype.forEach.call(els, function(cb){ cb.checked = e.target.checked; }); }) ; 
 <input id="i1" type="checkbox" name="additional"> <label for="i1">Вариант №1</label> <br> <input id="i2" type="checkbox" name="additional"> <label for="i2">Вариант №2</label> <br> <input id="i3" type="checkbox" name="additional"> <label for="i3">Вариант №3</label> <br> <input id="i4" type="checkbox" name="additional"> <label for="i4">Вариант №4</label> <br> <input id="select_all" type="checkbox"> <label for="select_all">Выбрать / Снять Все</label>

  • and what is the meaning of the transference ; on a new line? :-) - Grundy
  • spawn a heated discussion in the comments :) - Sergiks
  • then you can also recall about querySelector *, which would simplify the code :-) - Grundy
  • which querySelectorAll() in this case. Easy ways are not looking! - Sergiks
  • I'm there about the function group: P - Grundy

More options using jQuery

 $("#select_all").click(function() { $(':checkbox').prop('checked', this.checked); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <fieldset> <legend>Полный выбор</legend> <input id="i1" type="checkbox" name="additional"> <label for="i1">Вариант №1</label> <br> <input id="i2" type="checkbox" name="additional"> <label for="i2">Вариант №2</label> <br> <input id="i3" type="checkbox" name="additional"> <label for="i3">Вариант №3</label> <br> <input id="i4" type="checkbox" name="additional"> <label for="i4">Вариант №4</label> <br> <input id="select_all" type="checkbox"> <label for="select_all">Выбрать / Снять Все</label> </fieldset>

and without

 document.querySelector("#select_all").addEventListener('click', function(e) { [].forEach.call(document.querySelectorAll('[type="checkbox"]'), c => c.checked = this.checked); // если не поддерживаются стрелочные функции /* [].forEach.call(document.querySelectorAll('[type="checkbox"]'), function(c) { c.checked = this.checked }, this); */ }); 
 <fieldset> <legend>Полный выбор</legend> <input id="i1" type="checkbox" name="additional"> <label for="i1">Вариант №1</label> <br> <input id="i2" type="checkbox" name="additional"> <label for="i2">Вариант №2</label> <br> <input id="i3" type="checkbox" name="additional"> <label for="i3">Вариант №3</label> <br> <input id="i4" type="checkbox" name="additional"> <label for="i4">Вариант №4</label> <br> <input id="select_all" type="checkbox"> <label for="select_all">Выбрать / Снять Все</label> </fieldset>

    If on jquery and without optimization, you can do this:

     $("#select_all").click(function (){ if ($(this).attr("checked")) $("input").attr('checked', true); else $("input").attr('checked', false); });