在单独的切换更改上切换多个复选框

Posted 2021-05-05

我有几个复选框，或者，我应该说，几个bootstrap toggles：

<input id="master-toggle" type="checkbox" data-toggle="toggle">
<input type="checkbox" class="slave-toggle" data-toggle="toggle">
<input type="checkbox" class="slave-toggle" data-toggle="toggle">

我想要做的是在切换slave-toggle时切换每个master-toggle。为此，我编写了以下代码：

$('#master-toggle').change(() =>  {
   if($(this).prop('checked')) {
      $('.slave-toggle').each(() => {
          $(this).prop('checked', true).change();
      });
   } else {
      $('.slave-toggle').each(() => {
          $(this).prop('checked', false).change();
      });
   }
}); 

因此，当切换master-toggle时，函数执行，检查“checked”属性的值。如果“复选框”被“选中”，则它会遍历slave-toggle类的所有元素，并将其“checked”属性设置为true。当master-toggle“未经检查”时，同样的事情。对？

嗯，问题是，我遇到了两个问题。首先，$(this).prop('checked')语句中的if表达式总是评估为undefined。其次，即使我强制使用此值，在$(this).prop('checked', true).change()函数内执行each也不会改变slave-toggle的状态。是什么赋予了？我究竟做错了什么？

任何帮助是极大的赞赏。这是jsfiddle链接。

答案

您遇到的问题与箭头功能的使用有关。

() => {}

箭头函数不会改变this在其上下文中的含义。这是他们的特色之一。为了按照您的预期参考this，请使用普通函数。否则，更改事件的e.target应该是更改的元素，并且each方法应该传入您可以引用的参数index, element。