如何在Javascript中获取开关切换当前状态(真/假)负载

Question

我有一个来自PHP/Mysql代码的多个开关开关，我想在这个开关中显示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();
    }
});