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

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

怎么了

最佳答案

实际上，您根本不使用复选框类。这就是为什么它不起作用。

像下面这样:

更改-

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

至

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

一切都会正常。

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

注意:-您可以使用:-$('.onoffswitch-checkbox').change(function(){(@NikhilNanjappa提供)