使用javascript切换所有按钮

Toggle all buttons using javascript

本文关键字：按钮 javascript 使用      更新时间：2023-09-26

我需要创建一个电子邮件首选项页面。到目前为止，除了一个细节，我已经把所有的东西都编码好了，并且工作正常。我正在使用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,
    });
  })

我更新了您的JQuery，如下所示：

Fiddle示例

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

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

<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>
相关文章：