如何获取原版 JavaScript 中选中复选框的值？

Question

我正在处理这个片段。 为什么我无法使用 class .shapes获得任何选中复选框的value ？

 document.getElementsByName('shapes').onclick = function() { var checkboxes = document.getElementsByName('shapes')[0].value; console.log(checkbox.value); }

 <div class="js-shapes"> <span class="ib"> <input type="checkbox" name="shapes" class="shapes" value="circle" id="cb-circle"> <label for="cb-circle">Circle</label> </span> <span class="ib"> <input type="checkbox" name="shapes" class="shapes" value="diamond" id="cb-diamond"> <label for="cb-diamond">Diamond</label> </span> <span class="ib"> <input type="checkbox" name="shapes" class="shapes" value="square" id="cb-square"> <label for="cb-square">Square</label> </span> <span class="ib"> <input type="checkbox" name="shapes" class="shapes" value="triangle" id="cb-triangle"> <label for="cb-triangle">Triangle</label> </span> <span class="ib"> <input type="checkbox" name="shapes" class="shapes" value="all" id="cb-all" checked> <label for="cb-all">all Shapes</label> </span> </div>

Answer 1

您可以简单地使用querySelectorAll方法并使用 forEach 方法来检查使用 addEventListener 并在其中change clicked的复选框。

编辑：如果您想在选中时获取复选框的值，您可以checked属性，然后显示其值。

现场演示

 let allCheckBox = document.querySelectorAll('.shapes') allCheckBox.forEach((checkbox) => { checkbox.addEventListener('change', (event) => { if (event.target.checked) { console.log(event.target.value) } }) })

 <div class="js-shapes"> <span class="ib"> <input type="checkbox" name="shapes" class="shapes" value="circle" id="cb-circle"> <label for="cb-circle">Circle</label> </span> <span class="ib"> <input type="checkbox" name="shapes" class="shapes" value="diamond" id="cb-diamond"> <label for="cb-diamond">Diamond</label> </span> <span class="ib"> <input type="checkbox" name="shapes" class="shapes" value="square" id="cb-square"> <label for="cb-square">Square</label> </span> <span class="ib"> <input type="checkbox" name="shapes" class="shapes" value="triangle" id="cb-triangle"> <label for="cb-triangle">Triangle</label> </span> <span class="ib"> <input type="checkbox" name="shapes" class="shapes" value="all" id="cb-all" checked> <label for="cb-all">all Shapes</label> </span> </div>

Answer 2

getElementsByName()返回集合，您必须遍历它们，以便您可以将事件单独附加到它们。 另外，我建议您使用addEventListener()附加事件：

 document.getElementsByName('shapes').forEach(function(chk){ chk.addEventListener('click', function() { if(this.checked){ console.log(this.value); } }); });

 <div class="js-shapes"> <span class="ib"> <input type="checkbox" name="shapes" class="shapes" value="circle" id="cb-circle"> <label for="cb-circle">Circle</label> </span> <span class="ib"> <input type="checkbox" name="shapes" class="shapes" value="diamond" id="cb-diamond"> <label for="cb-diamond">Diamond</label> </span> <span class="ib"> <input type="checkbox" name="shapes" class="shapes" value="square" id="cb-square"> <label for="cb-square">Square</label> </span> <span class="ib"> <input type="checkbox" name="shapes" class="shapes" value="triangle" id="cb-triangle"> <label for="cb-triangle">Triangle</label> </span> <span class="ib"> <input type="checkbox" name="shapes" class="shapes" value="all" id="cb-all" checked> <label for="cb-all">all Shapes</label> </span> </div>