如何获取多个复选框的值并使用复选框中的值执行增量

Question

我似乎可以通过使用带有查询选择器的 id 来获取元素。 有没有办法检查是否使用 document.getelementbyId 检查了复选框？

<script>
function checked(a,b,c){
    var marked = (a+b+c)
    document.write(marked);
}

function filled(){
    var value1 = document.querySelector("#1:checked").value;
    var value2 = document.querySelector("#2:checked").value;
    var value3 = document.querySelector("#3:checked").value;

    checked(value1,value2,value3);

    

}

<body>

<input class="chk1" id="1" type="checkbox" value="10"/>
<input class="chk2" id="2" type="checkbox" value="20"/>
<input class="chk3" id="3" type="checkbox" value="30"/>

<button name="submit" onclick="filled()" type="button" style="width: 100px; height: 100px;" >Submit</button>


</body>

Answer 1

您的 ID 无效。 即使它们是（例如，如果您将它们更改为以字母开头），如果未选中复选框，则querySelector将返回null （因此无法访问.value ）。

删除 ID 并改用querySelectorAll 。 为了使事情简洁，我会给他们一个 class 然后:checked伪选择器与 class 结合将 select 所有复选框。

如果可能的话，您还应该真正避免使用内联处理程序，它们现在有太多问题值得使用。

 document.querySelector('button').addEventListener('click', () => { const checkedBoxes = document.querySelectorAll('.chk:checked'); const sum = [...checkedBoxes].reduce((a, b) => a + Number(b.value), 0); console.log(sum); });

 button { width: 100px; height: 100px; }

 <input class="chk" type="checkbox" value="10"> <input class="chk" type="checkbox" value="20"> <input class="chk" type="checkbox" value="30"> <button>Submit</button>

Answer 2

在 ID 的值中使用数字、标点符号或特殊字符可能会在其他上下文中引起问题（例如，CSS、JavaScript、正则表达式）。

例如，以下 ID 在 HTML5 中有效：

<div id="1"> ... </div>

但是，它在 CSS 中无效，因为选择器不能是数字或以数字开头，但可以介于中间或以数字结尾。

因此，只需更改 html 中的 ID 属性值，以及您在 javascript 中引用它们的位置。 一定不要错过任何分号

如何获取多个复选框的值并使用复选框中的值执行增量

问题描述

2 个解决方案

解决方案1
1 已采纳 2021-01-23 15:54:44

解决方案2
0 2021-01-23 16:57:14

如何获取多个复选框的值并使用复选框中的值执行增量

问题描述

2 个解决方案

解决方案1 1 已采纳 2021-01-23 15:54:44

解决方案2 0 2021-01-23 16:57:14

解决方案1
1 已采纳 2021-01-23 15:54:44

解决方案2
0 2021-01-23 16:57:14