複選框隱藏與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它時，文件已準備就緒。

見updated js fiddle here.

$(document).ready(function(){ 

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

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

}); 

Answer 2

嘗試使用CSS隱藏.selector：

.selector { 
    display: none; 
} 

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

Answer 3

這裏有沒有JS變化基於CSS的解決方案。

隱藏.selector元素與display: none，還要注意給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

我馬騰的解決方案上面，用雞蛋裏挑骨頭，它更有意義的「選擇隱藏」類添加到複選框和切換，與其達成一致。

CSS：

.selector-hidden { 
    display: none; 
} 

JQuery的：

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

https://jsfiddle.net/pg04yhav/

這樣的選擇可以用 '選擇' 類中的風格，但是通過切換「selector-隱藏隱藏「類。