0

Как я могу выбрать или снять выделение сразу со всех чекбоксов, при этом чтобы, если у меня выбраны уже некоторые чекбоксы это работало корректно, то есть если у меня выбраны два бокса то при нажатии выделяются все без инверсии и наоборот?

Пример кода:

  <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>
4
  • @Grundy не совсем. тут опять же не только снять, но инвертировать ;) 23 авг 2016 в 9:41
  • @АлексейШиманский, а вот и нет :P если у меня выбраны два бокса то при нажатии выделяются все без инверсии и наоборот?
    – Grundy
    23 авг 2016 в 9:42
  • @Grundy мне нужно именно без инвертирования и чтобы это работало в обе стороны, все предложенные варианты модераторами не подходят
    – user192664
    23 авг 2016 в 9:44
  • @JohnScott, вот как раз второй вариант - то, что нужно если заменить жесткое выставление false на параметр
    – Grundy
    23 авг 2016 в 9:44

3 ответа 3

1

Upd. с уважением к замечаниям @Grundy, сделал код короче и менее читабельным.

Атрибут чекбокса checked можно назначать:

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>

7
  • а в чем смысл переноса ; на новую строку? :-)
    – Grundy
    23 авг 2016 в 9:48
  • породить бурную дискуссию в комментах : )
    – Sergiks
    23 авг 2016 в 9:49
  • тогда еще и про querySelector* можно вспомнить, который бы еще упростил код :-)
    – Grundy
    23 авг 2016 в 9:50
  • который querySelectorAll() в данном случае. Лёгких путей не ищем!
    – Sergiks
    23 авг 2016 в 9:52
  • я там про группу функции :P
    – Grundy
    23 авг 2016 в 9:53
1

Еще варианты с использованием 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>

и без

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>

0

если на jquery и без оптимизации то можно так:

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