2

Как получить значение всех выбранных checkbox через JavaScript?

<input class="checkbox" type="checkbox" name="brand[]" value="checkbox1" id="checkbox1" />
<input class="checkbox" type="checkbox" name="brand[]" value="checkbox2" id="checkbox2" />
0

2 ответа 2

7

Всё просто, с помощью JavaScript к примеру, берем все чекбоксы по классу getElementsByClassName и смотрим в цикле, кто выбран

function getCheckedCheckBoxes() {
  var checkboxes = document.getElementsByClassName('checkbox');
  var checkboxesChecked = []; // можно в массиве их хранить, если нужно использовать 
  for (var index = 0; index < checkboxes.length; index++) {
     if (checkboxes[index].checked) {
        checkboxesChecked.push(checkboxes[index].value); // положим в массив выбранный
        alert(checkboxes[index].value); // делайте что нужно - это для наглядности
     }
  }
  return checkboxesChecked; // для использования в нужном месте
}
<input class="checkbox" type="checkbox" value="checkbox1" id="checkbox1" />
<input class="checkbox" type="checkbox" value="checkbox2" id="checkbox2" />

<button onclick="getCheckedCheckBoxes()"> Кто выбран? </button>

Помимо getElementsByClassName можно использовать getElementsByName или getElementsByTagName. В общем, реализаций можно написать много.

3
  • как реализовать без нажатия на button 7 апр 2017 в 13:32
  • вообще суть такая что мне нужно все эти значения потом передать через AJAX 7 апр 2017 в 13:35
  • Смотрите правку. Добавил return, то есть перед формированием AJAX вызываете метод - получаете массив значений выбранных чек-боксов и все. 7 апр 2017 в 13:37
2

Для получения всех отмеченных чекбоксов можно воспользоваться функцией document.querySelectorAll с селектором :checked

function getCheckedCheckBoxes() {
  var selectedCheckBoxes = document.querySelectorAll('input.checkbox:checked');

  var checkedValues = Array.from(selectedCheckBoxes).map(cb => cb.value);

  console.log(checkedValues);

  return checkedValues; // для использования в нужном месте
}
<input class="checkbox" type="checkbox" name="brand[]" value="checkbox1" id="checkbox1" />
<input class="checkbox" type="checkbox" name="brand[]" value="checkbox2" id="checkbox2" />

<button onclick="getCheckedCheckBoxes()"> Кто выбран? </button>

5
  • Для es5 отличие будет только в строке, где обьявляется переменная checkedValues -> var checkedValues = Array.prototype.map.call(selectedCheckBoxes,function(cb){ return cb.value })'
    – ddeadlink
    7 апр 2017 в 15:04
  • нужно реализовать без нажатия на button, а по нажатию на checkbox 7 апр 2017 в 15:29
  • @harbor, замени button на checkbox
    – Grundy
    7 апр 2017 в 15:35
  • хорошо, а можно перечислять значения чекбоксов не через запятую? 7 апр 2017 в 15:38
  • @harbor, функция возвращает массив значений. Можешь его как угодно к строке приводить, если нужно. Либо как массив значений и использовать
    – Grundy
    7 апр 2017 в 15:54

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.