Jquery实现checkbox全选与全不选
设置全选与非全选：
1.基础功能：
要求：单击全选，则全选按钮下的复选框全部选中，否则则全不选
根据ID获取全选按钮，绑定点击事件，事件内的回掉函数中$("#check input")这是使用了层级选择器获取所有的复选框并给他绑定prop事件
使用带两个参数的方法第一个参数是checked属性第二个参数true或false.注意：获取复选框的方法很多种这只演示了一种！
$(function () {
$("#che_quan").click(function () {
$("#check input").prop("checked",$("#che_quan").is(":checked"));
});
});
2.加强
要求：当复选框中有一个不选中 则全选按钮也不选中，当复选框全部选中 则全选按钮也选中
注意 $(".chec:checked").length;这使用类选择器选中所有class相同的复选框,后面直接接（：checked） 注意.chec:checked中间不能有空格 有空格的话系统会自动将他识别取子集
$(function () {
$("#che_quan").click(function () {
$("#check input").prop("checked",$("#che_quan").is(":checked"));
});
$("#check input").click(function () {
var len=$(".chec").length;
var sum = $(".chec:checked").length;
if (len==sum){
$("#che_quan").prop("checked",true);
}else{
$("#che_quan").prop("checked",false);
}
})
});
---------------------------------------------------------------
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(function () {
$("#che_quan").click(function () {
$("#check input").prop("checked",$("#che_quan").is(":checked"));
});
$("#check input").click(function () {
var len=$(".chec").length;
var sum = $(".chec:checked").length;
if (len==sum){
$("#che_quan").prop("checked",true);
}else{
$("#che_quan").prop("checked",false);
}
})
});
</script>
<html>
<head>
<title>$Title$</title>
</head>
<body>
<input type="checkbox" id="che_quan"/>全选
<div id="check">
<input type="checkbox" class="chec"/>
<input type="checkbox" class="chec"/>
<input type="checkbox" class="chec"/>
<input type="checkbox" class="chec"/>
</div>
</body>
</html>
浙公网安备 33010602011771号