javascript - 使用 javascript 切换所有按钮

Question

我需要创建一个电子邮件首选项页面。到目前为止，除了一个细节之外，我已经对所有内容进行了编码并正常工作。我使用 jQuery、jQuery-UI 和另一个库 ( http://olance.github.io/jQuery-switchButton/ ) 作为按钮，这些按钮调用 switchbutton() 并将复选框转换为类似按钮的切换，现在看起来像这样:

http://pages.norsecorp.com/rs/681-ONL-293/images/email-preference-center.html

我遇到的问题是尝试让底部按钮控制所有顶部按钮以将它们全部关闭或全部打开。显然我仍在学习 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>  

<小时/>

我调用的函数将输入复选框转换为切换开关:

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

Answer 1

我已按如下方式更新了您的 JQuery:

Fiddle example

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
  })