使用javascript切换所有按钮

我需要创建一个电子邮件首选项页面。到目前为止，除了一个细节外，我已经把所有的东西都编好了，工作正常。我使用jQuery、jQuery UI和另一个库（）作为按钮，这些按钮调用switchbutton（），并将复选框转换为类似切换的按钮，这些按钮现在如下所示：

我遇到的问题是，试图让底部按钮控制所有顶部按钮，使它们全部关闭或全部打开。我显然还在学习JavaScript，所以任何帮助都将不胜感激

---

我的html的一个片段：

 <div class="preferenceContainer">
    <div class="preferenceColumn"> 
     <div class="preferenceInfo" id="darkmatters"><h1><span class="heavy-weight">DARK</span>MATTERS<sup>&trade;</sup></h1><p>Copy on what readers will be getting in their inbox and what the basic idea of the communication is</p></div>
      <div class="toggle"> 
       <input type="checkbox" class="check-single" name='Newsletter__c' id='Newsletter__c' value="true" checked>
      </div>
    </div>
   <div class="preferenceColumn">
    <div class="preferenceInfo" id="flashreport"><h1>Flash Report</h1><p>Copy on what readers will be getting in their inbox and what the basic idea of the communication is</p></div>
     <div class="toggle"> 
      <input type="checkbox" class="check-single" name='Flash_Report__c' id='Flash_Report__c' value="true" checked>
     </div>
    </div>
    <div class="preferenceColumn" >
     <div class="preferenceInfo" id="threatintel"><h1>THREAT INTEL</h1><p>Copy on what readers will be getting in their inbox and what the basic idea of the communication is</p></div>
      <div class="toggle">
       <input type="checkbox" class="check-single" name='Threat_Intel__c' id='Threat_Intel__c' value="true" checked>
      </div>
    </div>
    <hr class="form-break"/>
    <div class="preferenceAll">  <div class="toggle" id="toggle-all">
      <input type="checkbox" class="check-all" id="check-all"/>
    </div> <h2>Please Remove Me From All Communications</h2></div>
    </div>  

---

请参阅代码注释以了解我正在执行的操作：

<script type="text/javascript">
            $(function () {
                //setup on change event listener on element id #check-all
                $("#check-all").on("change", function () {
                    //determine if #check-all is checked and store true/false in a variable
                    var checkAll = this.checked;
                    //loop through all check boxes with class .check-single
                    $(".check-single").each(function (index) {
                        //assign checkAll variable as state
                        //normal checkbox
                        //this.checked = checkAll;
                        //using switchbutton API
                        $(this).switchButton({ checked: checkAll });

                    });
                });

                $(".toggle input").switchButton({
                    show_labels: false,
                    width: 100,
                    height: 40,
                    button_width: 40,
                });
            })

        </script>

$（函数（）{
//设置元素id上的更改事件侦听器#全部选中
$（“#全部选中”）。在（“更改”上，函数（）{
//确定是否选中了#check all并将true/false存储在变量中
var checkAll=this.checked；
//使用类遍历所有复选框。选中单个
$（“.check single”）。每个（函数（索引）{
//将checkAll变量指定为状态
//正常复选框
//this.checked=checkAll；
//使用开关按钮API
$（this）.switchButton（{checked:checkAll}）；
});
});
$（“.toggle input”）.开关按钮({
显示标签：false，
宽度：100，
身高：40，
按钮宽度：40，
});
})

请参阅代码注释以了解我所做的解释：

<script type="text/javascript">
            $(function () {
                //setup on change event listener on element id #check-all
                $("#check-all").on("change", function () {
                    //determine if #check-all is checked and store true/false in a variable
                    var checkAll = this.checked;
                    //loop through all check boxes with class .check-single
                    $(".check-single").each(function (index) {
                        //assign checkAll variable as state
                        //normal checkbox
                        //this.checked = checkAll;
                        //using switchbutton API
                        $(this).switchButton({ checked: checkAll });

                    });
                });

                $(".toggle input").switchButton({
                    show_labels: false,
                    width: 100,
                    height: 40,
                    button_width: 40,
                });
            })

        </script>

$（函数（）{
//设置元素id上的更改事件侦听器#全部选中
$（“#全部选中”）。在（“更改”上，函数（）{
//确定是否选中了#check all并将true/false存储在变量中
var checkAll=this.checked；
//使用类遍历所有复选框。选中单个
$（“.check single”）。每个（函数（索引）{
//将checkAll变量指定为状态
//正常复选框
//this.checked=checkAll；
//使用开关按钮API
$（this）.switchButton（{checked:checkAll}）；
});
});
$（“.toggle input”）.开关按钮({
显示标签：false，
宽度：100，
身高：40，
按钮宽度：40，
});
})

我已将您的JQuery更新如下：

---

我已将您的JQuery更新如下：

---

这很有效，谢谢。只是好奇“checked:show”属性。我不知道为什么需要这样做？选中的属性设置复选框的状态<代码>显示是一个布尔值，根据应用于“全部切换”复选框的当前类进行设置。当“toggle all”复选框有一个选中的类时，下一次单击它时，所有复选框都需要取消选中，因此为什么

！检查是否使用了值，即相反的值。这非常有效，谢谢。只是好奇“checked:show”属性。我不知道为什么需要这样做？选中的属性设置复选框的状态<代码>显示

是一个布尔值，根据应用于“全部切换”复选框的当前类进行设置。当“toggle all”复选框有一个选中的类时，下一次单击它时，所有复选框都需要取消选中，因此为什么

！检查是否使用了值，即相反的值。
function toggleSwitches(show) {
  $(function() {
      $(".toggle input").switchButton({
        show_labels: false,
        width: 100,
        height: 40,
        button_width: 40,
        checked: show,
      });
    });
  }
  toggleSwitches(true); //Called when page first loads

  $('#toggle-all').change(function() {
    //Check if the "checked" class has been applied to the appropriate element. 
    //This will will be used to set the state of the inputs via the toggleSwitches function.
    var checked = $('#toggle-all .switch-button-background').hasClass('checked');

    toggleSwitches(!checked); //Use the inverse value to change the state
  })