查找是否在父 div 中选中所有复选框答案

【问题标题】：Find whether all checkbox are checked within a parent div查找是否在父 div 中选中所有复选框
【发布时间】：2019-11-09 03:31:45
【问题描述】：

我正在尝试获取 div 元素中两个输入复选框的状态。只有在检查两个复选框时，我需要将标志变量设置为true。如果任何输入复选框未选中，则应将其设置为 false。

我用下面的代码用for循环尝试了这个

var oParNode = oNode.ParentNode;
if (null != oParNode) {

  for (var i = 0; i < oNode.ParentNode.Nodes.length; i++) {
    if (oNode.ParentNode.Nodes[i].Checked) {
      checked = true;
    }
    else {
      checked = false;
    }
  }
}

在此代码中，Nodes[i] 返回输入元素。当我首先检查第一个复选框和接下来的第二个复选框时，此循环工作正常，但是当我首先检查第二个复选框时，根据最后执行的第二个复选框值将选中的变量设置为 true。

预期：只有当两个复选框都被选中时，我才需要返回“已选中”为真。

有人可以建议我吗？

【问题讨论】：

标签： javascript html arrays checkbox

【解决方案1】：

您可以使用Array#some() method，检查是否有未选中的：

var checked = oNode.ParentNode.Nodes.some(check => !check.checked)

【讨论】：

【解决方案2】：

似乎第二个节点覆盖了该值。如果你知道有两个复选框，你可以像这样直接检查它。

if (oNode.ParentNode.Nodes[0].Checked && oNode.ParentNode.Nodes[1].Checked) {
    checked = true;
} else {
   checked = false;
}

【讨论】：

感谢您的回答。是的，如果它只有 2 我可以使用它，但客户可能会使用一组不同的数据，这些数据可能在父元素中有多个复选框。在这种情况下，有什么通用的方法可以做到这一点。？
在这种情况下，您可以按照 Code Maniac 在其他答案中建议的那样打破循环。 @keerthana

【解决方案3】：

不要找到所有选中的，而是找到未选中的，因为这是您要查找的内容。

var checked = true;
for (var i = 0; i < oNode.ParentNode.Nodes.length; i++) {
    if (!oNode.ParentNode.Nodes[i].Checked) {
       checked = false;
       break;
    }
}

【讨论】：

【解决方案4】：

如果未选中任何复选框，您需要中断循环

 var oParNode = oNode.ParentNode;
 if (null != oParNode) {
 for (var i = 0; i < oNode.ParentNode.Nodes.length; i++) {
   if (oNode.ParentNode.Nodes[i].Checked) {
     checked = true;
   }  else {
      checked = false;
      break;
   }
 }
}

你可以简单地用every数组的方法代替循环

let checkedAll = oNode.ParentNode.Nodes.every(element => element.checked )

【讨论】：