Javascript 如何根据1个主要复选框（19次）选中/取消选中3个次要复选框？

我有19张卡片，共4个复选框：1个主复选框（日期）和3个辅助复选框（该日期的选项）。我希望在选中主选项时选中3个辅助选项，反之，在取消选中主选项时取消选中它们。 我想为所有19张卡使用一个单一功能。但是，复选框具有不同的ID

当我点击主复选框时 我从主复选框中获取id。 我检索id中包含的号码。 我将其应用于三个值以创建三个辅助复选框的id。 如果选中了主复选框： 我选中辅助复选框。 如果未选中主复选框： 我取消选中辅助复选框

我试过“onclick”和“onchange”

功能自动检查（id）{
var\u id=id；
var StgNbr=单击的子项（4）；
var diner=“Dîner”+StgNbr；
var souper=“souper”+StgNbr；
var logement=“logement”+StgNbr；
如果（单击\u id.checked=true）{
警惕（“je suis coché”）；
var items=document.getElementsByClassName（'presence'）；
对于（变量i=0；i

2007年3月23日
迪纳

酸味

日志

Mercredi 24/07
迪纳

酸味

日志

这是一个单击侦听器，单击主复选框时，我们会选中/取消选中子复选框。这就是你要找的吗

const getParentCard=（e，classToMatch）=>{
while（e.classList.contains（classToMatch）==false）
{
e=e.parentNode；
}
返回e；
};
document.addEventListener（'单击'，（e）=>{
如果（e.target.matches（'input.date'））{
getParentCard（例如，target，'card'）。queryselectoral（'input[type=“checkbox”]”）。forEach（chk=>{
chk.checked=e.target.checked；
});
}
});

2007年3月23日
迪纳

酸味

日志

Mercredi 24/07
迪纳

酸味

日志

这是一个单击侦听器，单击主复选框时，我们会选中/取消选中子复选框。这就是你要找的吗


const getParentCard=（e，classToMatch）=>{
while（e.classList.contains（classToMatch）==false）
{
e=e.parentNode；
}
返回e；
};
document.addEventListener（'单击'，（e）=>{
如果（e.target.matches（'input.date'））{
getParentCard（例如，target，'card'）。queryselectoral（'input[type=“checkbox”]”）。forEach（chk=>{
chk.checked=e.target.checked；
});
}
});

2007年3月23日
迪纳

酸味

日志

Mercredi 24/07
迪纳

酸味

日志

代码中有两个主要问题：

if (clicked_id.checked = true) {

执行赋值而不是比较，但更重要的是，
clicked\u id
是一个字符串，并且字符串值没有
checked
属性。您必须访问实际元素的
checked
属性，方法是将元素作为参数传递给函数（首选）或执行以下操作


话虽如此，使用任意数量的复选框而无需更新代码的更灵活方法如下：


寻找最近的共同祖先
查找该祖先中的所有复选框

例如：

function Autocheck(element) {
  var ancestor = element.closest('.card');
  if (ancestor) {
    Array.from(ancestor.querySelectorAll('.presence')).forEach(function(input) {
      input.checked = element.checked;
    });
  }
}

并将其用作

<input type="checkbox" id="date1" class="date presence" name="Dates" onclick="Autocheck(this)">

代码中有两个主要问题：

if (clicked_id.checked = true) {

执行赋值而不是比较，但更重要的是，
clicked\u id
是一个字符串，并且字符串值没有
checked
属性。您必须访问实际元素的
checked
属性，方法是将元素作为参数传递给函数（首选）或执行以下操作


话虽如此，使用任意数量的复选框而无需更新代码的更灵活方法如下：


寻找最近的共同祖先
查找该祖先中的所有复选框

例如：

function Autocheck(element) {
  var ancestor = element.closest('.card');
  if (ancestor) {
    Array.from(ancestor.querySelectorAll('.presence')).forEach(function(input) {
      input.checked = element.checked;
    });
  }
}

并将其用作

<input type="checkbox" id="date1" class="date presence" name="Dates" onclick="Autocheck(this)">


if（clicked\u id.checked=true）
将
true
分配给
clicked\u id.checked
。只要做
if（点击id.checked）
。我假设所有相关的复选框都有一个不同的共同祖先，比如你的例子中的
.card
？是的。确切地每四个复选框都在一个div“card”中。
if（clicked_id.checked=true）
将
true
分配给
clicked_id.checked
。只要做
if（点击id.checked）
。我假设所有相关的复选框都有一个不同的共同祖先，比如你的例子中的
.card
？是的。确切地每四个复选框都在一个div“card”中。感谢您的解释。我看到了该元素。IE和Edge不支持最近的元素：/至少应在边缘上对其进行支撑。MDN为您提供了一个polyfill