如何在Javascript中获取开关切换开关当前状态（真/假）onload

Question

我有一个来自 PHP/Mysql 代码的多开关切换，我想在当前 ON 的切换中显示 div。

另外，我想在切换开关打开/关闭时显示/隐藏 div

我的 PHP 代码：

  <li>
    <?php echo $_ship_method_value['shipping_title'];?>
    <label class="switch">
      <!-- Toggled Case -->
      <input type="checkbox" id="toggd" name="toggle" value="<? echo $_ship_method_value['shipping_id']; ?>" class='cmn-toggle cmn-toggle-round' data-switchery <? if(array_key_exists("shipping_available",$_ship_method_value)) echo 'checked'; ?> /> 
       <span class="slider round hide-off"></span>
  </li>

      <div class="show-hide">
         <p>Want to show this div ;-)</p>
     </div> 
  
 

我的 jQuery 代码

   $('input[name=toggle]').change(function(){
          var mode = $(this).prop('checked');
            if(mode == true){
              $(".show-hide").show();
            }else{
              $(".show-hide").hide();
            }
          });'

但此代码仅适用于单击单个切换事件的切换。

请帮助我找到解决方案。谢谢！

Answer 1

 $('.toggle_check_box').change(function(){
          var mode = $(this).prop('checked');
            if(mode == true){
              $(".show-hide").show();
            }else{
              $(".show-hide").hide();
            }
          });

您可以为您的复选框应用类并像这样使用。这将在所有开关按钮上切换 div

Answer 2

 $('body').on('change', 'input[name=toggle]', function() {
    var mode = $(this).prop('checked');
    if (mode == true) {
        $(".show-hide").show();
    } else {
        $(".show-hide").hide();
    }
});

** 更新**

如果 div 位于 li 旁边，那么下面的代码将为您工作。

 $('body').on('change', 'input[name=toggle]', function() {
    var mode = $(this).prop('checked');
    if (mode == true) {
       $(this).closest("li").next(".show-hide").show();
    } else {
       $(this).closest("li").next(".show-hide").hide();
    }
});