получить флажок выбранное значение

Question

У меня есть несколько флажков, которые генерируются кодом php, и HTML выглядит следующим образом:

<input name="checkbox" id="checkbox" value="firstBox" type="checkbox">
<input name="checkbox" id="checkbox" value="secondBox" type="checkbox">

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

document.getElementById('checkbox').value

Я всегда получаю 'firstBox', даже когда выбран secondBox.Пожалуйста, помогите мне решить эту проблему

Answer 1

идентификаторы - это идентификаторы для определенных элементов.Поэтому они должны быть уникальными.

Альтернативой является установка того же имени и использование функции querySelectorAll для установки флажков.

Используйте этот селектор, чтобы получить отмеченные опции: [name="checkbox"]:checked

document.querySelector('#check').addEventListener('click', function() {
  var checked = Array.from(document.querySelectorAll('[name="checkbox"]:checked')); 
  checked.forEach(function(e) {
    console.log(e.value);  
  });  
});

<input name="checkbox" name="checkbox" value="firstBox" type="checkbox">
<input name="checkbox" name="checkbox" value="secondBox" type="checkbox">

<button id='check'>Check</button>

Answer 2

ID должны быть уникальными.

<input name="checkbox" id="checkbox1" value="firstBox" type="checkbox">
<input name="checkbox" id="checkbox2" value="secondBox" type="checkbox">

Получить значение первого флажка:

document.getElementById('checkbox1').value

Получить значение второго флажка

document.getElementById('checkbox2').value