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

有关我正在做的事情的解释，请参阅代码注释：

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

Answer 2

我已按如下方式更新了您的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
  })

使用javascript切换所有按钮

2 个答案: