Ersetzt Toggle-Taste mit einem Kontrollkästchen, aber nicht funktioniert

Question

Ich ersetzte die Schaltfläche auf dem jQuery Toggle-Code mit einer Checkbox, aber es kann nicht funktionieren. Hier

ist die HTML-Datei, in der ich versuchte, den Knopf mit einem Kontrollkästchen zu ersetzen

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

Was ist hier falsch?

Answer 1

Eigentlich arbeiten Sie nicht mit Check-Box-Klasse überhaupt. deshalb funktioniert es nicht.

Do it wie folgt: -

Change-

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

Um

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

Und alles wird gut funktionieren.

Arbeitsbeispiel: - https://jsfiddle.net/2uz0rsq8/

Hinweis: - Sie verwenden können: - $('.onoffswitch-checkbox').change(function(){ auch (durch @NikhilNanjappa)

Answer 2

$(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: '/' 
     }); 
    }); 

Änderung dieser Code

 $('#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(); 
     } 
    })