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

即使选择了secondBox，我也总是得到“ firstBox”。请帮我解决这个问题

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>

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

获取复选框选择的值

2 个答案: