javascript - 用复选框替换切换按钮但不起作用

Question

我用复选框替换了 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

这里有什么问题吗？

Answer 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();
      }
  })