checkbox 全选反选
程序员文章站
2022-06-01 13:16:18
...
html:
<div>
<p>
<input type="checkbox" name="checkbox" id="all">all
<br>
<input type="checkbox" name="checkbox1" class="subcheck">A
<input type="checkbox" name="checkbox1" class="subcheck"> B
<input type="checkbox" name="checkbox1" class="subcheck">C
</p>
<p>
<input type="checkbox" name="checkbox1" class="subcheck">D
<input type="checkbox" name="checkbox1" class="subcheck">E
<input type="checkbox" name="checkbox1" class="subcheck">F
</p>
</div>
script:
$(function(){
$("#all").click(function(){
if($(".subcheck:checked").length > 0){
$(".subcheck").each(function(){
$(this).prop("checked",false);
})
$(this).prop("checked",false);
}else{
$(".subcheck").each(function(){
$(this).prop("checked",true);
})
$(this).prop("checked",true);
}
//alert($(".subcheck:checked").length);
})
$(".subcheck").click(function(){
//alert($(".subcheck:checked").length);
if($(".subcheck:checked").length > 0 && $(".subcheck:checked").length < $(".subcheck").length){
if($("this").prop("checked")){
$("this").prop("checked",false);
}else{
$("this").prop("checked",true);
}
var allBox = document.getElementById("all");
allBox.indeterminate =true;
}else if($(".subcheck:checked").length == 0){
if($("this").prop("checked")){
$("this").prop("checked",false);
}else{
$("this").prop("checked",true);
}
var allBox = document.getElementById("all");
allBox.indeterminate =false;
$("#all").prop("checked",false);
}else if( $(".subcheck:checked").length == $(".subcheck").length){
if($("this").prop("checked")){
$("this").prop("checked",false);
}else{
$("this").prop("checked",true);
}
var allBox = document.getElementById("all");
allBox.indeterminate =false;
$("#all").prop("checked",true);
}
})
});
上一篇: 利用亚马逊AWS搭建个人服务器
下一篇: ubuntu合上笔记本,系统不睡眠