javascript - 获取复选框选定的值

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

即使选择了第二个框，我也总是得到“第一个框”。请帮我解决这个问题

Answer 1

ID 是特定元素的标识符。因此，它们必须是唯一的。

另一种方法是设置相同的名称并使用函数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>