动态检查复选框是否已选中

Question

我有两个 div 标签，其中包含series of checkboxes. 我想知道其中之一是否经过检查。<div id="doctor" class="doctor">   Doctor   <input type="checkbox" id="doctor0" name="I am 22" value="I am 22">   <label for="I am 22">I am 22</label><br>   <input type="checkbox" id="doctor1" name="I have a cough" value="I have a cough">   <label for="I have a cough">I have a cough</label></div> <div id="patient" class="patient">   Patient   <input type="checkbox" id="patient0" name="I am Patient" value="I am patient">   <label for="I am patient">I am patient</label><br>   <input type="checkbox" id="patient1" name="I have a cough" value="I have a cough">   <label for="I have a cough">I have a cough</label></div>我有这两个 div 标签，其中包含一系列动态生成的复选框。我想知道是否检查其中之一或两者都检查。检查Doctor下是否检查了一项或多项。检查是否在病人的情况下检查了一项或多项。如果两者都是真的，那就做点什么。如果仅选中其中一项，请执行某些操作。代码：function getItem(event) {   console.log(event.target.checked) }我能够知道它是否已检查，但不确定如何检查特定项目。我不想手动访问 dom 元素。if(document.getElementById("doctor0").checked || document.getElementById("patient0").checked)

Answer 1

您可以使用该querySelectorAll函数来获取特定 div 中选中的复选框的列表。

如果大小为list > 0，则包含选中的复选框。

1. 检查Doctor下是否检查了一项或多项。

   document.querySelectorAll('#doctor input[type=checkbox]:checked').length > 0

2. 检查是否在病人的情况下检查了一项或多项。

   document.querySelectorAll('#patient input[type=checkbox]:checked').length > 0

3. 


Answer 2

doctor/patient您可以创建一个函数，在其中传递要从中选择复选框的 div 的 id ，并将其与复选框选择器连接起来。

这样您就可以在两种情况下重复使用相同的选择器逻辑。

您可以像普通数组一样通过返回的 HTMLNodeObject 进行迭代querySelectorAll。复选框将有.checked-property 告诉它是否被选中。

function checkboxStatus(id) {

  let checkboxes = document.querySelectorAll(`#${id} input[type="checkbox"]`);

  checkboxes.forEach(item => {

    console.log(item.checked);

  });

}

CodeSandbox - 示例