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

299

09 апреля 2017, 03:20

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

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

Answer 1

Всё просто, с помощью 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" name="brand[]" value="checkbox1" id="checkbox1" /> 
<input class="checkbox" type="checkbox" name="brand[]" value="checkbox2" id="checkbox2" /> 
 
<button onclick="getCheckedCheckBoxes()"> Кто выбран? </button>

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

Answer 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>