Checkbox versteckt mit Jquery

Question

Ich habe diese versteckte Funktionalität für Checkbox mit jquery vorbereitet. https://jsfiddle.net/o2c8z5xw/ Wenn auf Versteckt geklickt wird, verschwinden die Kontrollkästchen. Wie kann ich dies standardmäßig tun, anstatt zu klicken, wenn die Seite geöffnet wird?

HTML-Code:

<label><input type="checkbox" id="Hidden" name="Hidden" class="hidden"/>Hidden</label> 

<form id="form1" name="form1" method="post" action=""> 
    <label><input type="checkbox" name="SelectAll" class="all" />All</label> 
    <label><input type="checkbox" name="5" class="selector" />5</label> 
    <label><input type="checkbox" name="7" class="selector" />7</label> 
    <label><input type="checkbox" name="9" class="selector" />9</label> 
</form> 

JQuery-Code:

$("#Hidden").on("click", function() { 
    $(".selector").toggle(); 
}); 

Answer 1

Sie könnten toggle es, wenn das Dokument bereit ist.

Siehe updated js fiddle here.

$(document).ready(function(){ 

    $(".selector").toggle(); 
    $("#Hidden").prop('checked', true); 

    $("#Hidden").on("click", function() { 
    $(".selector").toggle(); 
    }); 

}); 

Answer 2

Versuchen .selector mit CSS versteckt:

.selector { 
    display: none; 
} 

https://jsfiddle.net/o2c8z5xw/3/

Answer 3

Hier ist die CSS-basierte Lösung ohne JS Änderungen.

ausblenden die .selector Elemente mit display: none, aber beachten Sie auch die checked Attribut zu Ihrer „Hidden“ Checkbox hinzufügen, damit die Schnittstelle nach wie vor sinnvoll ist (sonst das Toggle-Verhalten das Gegenteil der versteckten Checkbox wird).

$("#Hidden").on("click", function() { 
 
    $(".selector").toggle(); 
 
});

.selector { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<label><input type="checkbox" id="Hidden" name="Hidden" class="hidden" checked />Hidden</label> 
 
<form id="form1" name="form1" method="post" action=""> 
 
    <label><input type="checkbox" name="SelectAll" class="all" />All</label> 
 
    <label><input type="checkbox" name="5" class="selector" />5</label> 
 
    <label><input type="checkbox" name="7" class="selector" />7</label> 
 
    <label><input type="checkbox" name="9" class="selector" />9</label> 
 
</form>

Answer 4

ich oben mit Maarten Lösung zustimmen, mit dem nitpick, dass es mehr Sinn macht, eine ‚Selektor-versteckte‘ Klasse, um die Kontrollkästchen und zu wechseln, statt hinzuzufügen.

CSS:

.selector-hidden { 
    display: none; 
} 

JQuery:

$("#Hidden").on("click", function() { 
    $(".selector-hidden").toggle(); 
}); 

https://jsfiddle.net/pg04yhav/

diese Weise die Wähler gestylt werden können die 'Selektor'-Klasse, sondern durch Umschalten des ‚Wähl- versteckt werden versteckte Klasse.