用复选框替换了切换按钮但不起作用答案

【问题标题】：Replaced toggle button with a checkbox but not working用复选框替换了切换按钮但不起作用
【发布时间】：2017-05-10 12:39:19
【问题描述】：

我用复选框替换了 jQuery 切换代码上的按钮，但无法使其正常工作。

这是我尝试用复选框替换按钮的 HTML 文件

index.html

<p> hi </p>
<!--<button>Press me</button>-->
<div class="onoffswitch">
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
    <label class="onoffswitch-label" for="myonoffswitch"></label>
</div>

javascript

$(function() {

    if (Cookies) {
        $("p").toggle(!( !! Cookies("toggle-state")) || Cookies("toggle-state") === 'true');
    }

    // $('button').on('click', function()
    $('#myonoffswitch.onoffswitch').is(":checked"), function() 
     {
        $("p").toggle();
        Cookies.set("toggle-state", $("p").is(':visible'), {
            expires: 1,
            path: '/'
        });
    });

});

Fiddle

这里有什么问题？

【问题讨论】：

但是，您希望输出是什么？你写了问题，但答案是什么？
@AlivetoDie，HTML 上的
@DeepakYadav，在切换时隐藏和显示
@Mecom - 在$('#myonoffswitch.onoffswitch') 中，onoffswitch 类不存在。该元素上使用的类是onoffswitch-checkbox。所以这个函数甚至不会被调用。 onoffswitch 用于其父元素，但不在该元素上
@NikhilNanjappa，我试过你说的，但没有用。你能在我发布的小提琴上给我看吗？

标签： javascript jquery html checkbox

【解决方案1】：

$(function() {
 

      $('#myonoffswitch').click(function(){
              /*Use toggle if you need only hide and show */
              //$("p").toggle(); 
              
              /*If you want to know the current status of checkbox       go with below code*/
          if($(this).is(':checked')){
                  $("p").show();
          }else{
                  $("p").hide();
          }
      })
  

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> hi </p>
<!--<button>Press me</button>-->
<div class="onoffswitch">
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
    <label class="onoffswitch-label" for="myonoffswitch"></label>
</div>

  $('#myonoffswitch.onoffswitch').is(":checked"), function() 
     {
        $("p").toggle();
        Cookies.set("toggle-state", $("p").is(':visible'), {
            expires: 1,
            path: '/'
        });
    });

将此代码更改为

       $('#myonoffswitch').click(function(){
          /*Use toggle if you need only hide and show */
          //$("p").toggle(); 

          /*If you want to know the current status of checkbox   go with below code*/
      if($(this).is(':checked')){
              $("p").show();
      }else{
              $("p").hide();
      }
  })

【讨论】：

我替换了整个脚本，但它没有切换。
@Mecom 如果您正在寻找这个，请检查 sn-p

【解决方案2】：

实际上，您根本没有使用复选框类。这就是它不起作用的原因。

如下所示：-

改变-

$('#myonoffswitch.onoffswitch').is(":checked"), function() {

到

$('.onoffswitch-checkbox').click(function() {

一切都会好起来的。

工作示例：- https://jsfiddle.net/2uz0rsq8/

注意：- 你也可以使用:- $('.onoffswitch-checkbox').change(function(){ (by @NikhilNanjappa)

【讨论】：

@Mecom 很高兴为您提供帮助:):)
只是补充你也可以使用$('.onoffswitch-checkbox').change(function(){
@AlivetoDie - change 事件。 OP 的另一种选择
@NikhilNanjappa 好一个。添加到答案中。谢谢。看的时候错过了