Jqueryでチェックボックスを隠す

Question

jqueryでチェックボックスにこの隠し機能を用意しました。 https://jsfiddle.net/o2c8z5xw/隠しをクリックすると、チェックボックスが消えます。ページを開いたときにクリックするのではなく、どうすればデフォルトでこれを行うことができますか？

HTMLコード：

<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コード：

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

Answer 1

あなたでしtoggleそれ文書の準備ができています。

は、CSSを使用して.selectorを隠してみupdated js fiddle here.

$(document).ready(function(){ 

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

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

}); 

Answer 2

を参照してください：

.selector { 
    display: none; 
} 

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

Answer 3

ここでノーJSの変更とCSSベースのソリューションです。

はdisplay: noneと.selector要素を非表示にするだけでなく、インターフェースはまだ（それ以外の場合はトグル動作が隠され、チェックボックスの反対になります）理にかなっているように、あなたの「隠れた」チェックボックスにchecked属性を追加することに注意してください。

$("#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

私はそれがチェックボックスに「セレクタ - 隠された」クラスを追加し、代わりにそれを切り替えるには、より理にかなっていることnitpickで、上記マールテンのソリューションに同意します。

CSS：

.selector-hidden { 
    display: none; 
} 

はJQuery：

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

https://jsfiddle.net/pg04yhav/

セレクタは 'セレクタ' クラスを使用してスタイリングすることができますこの方法が、「selector-をトグルすることによって隠されます隠れたクラスです。