获取复选框选择的值答案

【问题标题】：get checkbox selected value获取复选框选择的值
【发布时间】：2018-10-21 01:58:25
【问题描述】：

我有多个由 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”。请帮我解决这个问题

【问题讨论】：

ID 必须是唯一的

标签： javascript checkbox checked

【解决方案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>

【讨论】：

【解决方案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

【讨论】：

他只对获取选中的复选框值感兴趣。