复选框隐藏与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-隐藏隐藏“类。