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

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 标签，其中包含一系列动态生成的复选框。我想知道是否检查其中之一或两者都检查。

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

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

如果两者都是真的，那就做点什么。如果仅选中其中一项，请执行某些操作。

代码：

function getItem(event) {
  console.log(event.target.checked)
}

我能够知道它是否已检查，但不确定如何检查特定项目。我不想手动访问 dom 元素。

if(document.getElementById("doctor0").checked || document.getElementById("patient0").checked)

Answer 1

您可以使用该querySelectorAll函数来获取特定 div 中选中的复选框的列表。如果大小为list > 0，则包含选中的复选框。检查Doctor下是否检查了一项或多项。document.querySelectorAll('#doctor input[type=checkbox]:checked').length > 0检查是否在病人的情况下检查了一项或多项。document.querySelectorAll('#patient input[type=checkbox]:checked').length > 0

Answer 2

doctor/patient您可以创建一个函数，在其中传递要从中选择复选框的 div 的 id ，并将其与复选框选择器连接起来。这样您就可以在两种情况下重复使用相同的选择器逻辑。您可以像普通数组一样通过返回的 HTMLNodeObject 进行迭代querySelectorAll。复选框将有.checked-property 告诉它是否被选中。function checkboxStatus(id) {&nbsp; let checkboxes = document.querySelectorAll(`#${id} input[type="checkbox"]`);&nbsp; checkboxes.forEach(item => {&nbsp; &nbsp; console.log(item.checked);&nbsp; });}CodeSandbox - 示例