您的位置:首页 > Web前端 > JQuery

jquery 复选框全选、取消全选、全选按钮在未全选状态不选

2018-01-03 15:07 423 查看
代码:

<input type="checkbox" name="chooseAll" onclick="checkAll()">全选
<input type="checkbox" name="chooseMe" value="1" onchange="notCheckAll();">1
<input type="checkbox" name="chooseMe" value="2" onchange="notCheckAll();">2
<input type="checkbox" name="chooseMe" value="3" checked="checked" onchange="notCheckAll();">3
4000
<input type="checkbox" name="chooseMe" value="4" onchange="notCheckAll();">4
<input type="checkbox" name="chooseMe" value="5" onchange="notCheckAll();">5
<script>

function notCheckAll() {
var allLen = $("input[name='chooseMe']").length;  //获取全部复选框长度(除去全选的框)
var len = $("input[name='chooseMe']:checked").length;  //获取选中的框的长度
if (len < allLen) {   //如果选取的长度小于所有长度
$("input[name='chooseAll']").attr("checked", false);   //则全选框不选
} else {
$("input[name='chooseAll']").attr("checked", true);  //否则全选框选中
}
console.log(allLen);
}

function checkAll(){   //全选
if($("input[name='chooseAll']").attr("checked")){   //如果点击全选框
$("input[name='chooseMe']").attr("checked", true);   //所有框都选中
}else{
$("input[name='chooseMe']").attr("checked", false);   //否则都不选
}
}
</script>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: