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

复选框checkbox全选功能的jquery实现

2020-07-14 06:02 309 查看

前言

复选框的全选功能目前有很多插件可以实现，其实你如果自己来实现的话，会发现其实也写不了几行代码。

实现

<html>
<head>
<script src="https://code.jquery.com/jquery.js"></script>

</head>
<body>
<div>
全选<input type="checkbox" id="all_checkbox"><br>
<input type="checkbox" name="id">
<input type="checkbox" name="id">
</div>

</body>

<script type="text/javascript">
// 全部选择功能。 思路如下：
// 1.为全选框添加添加点击事件
//2. 当点击之后，获得全选框的状态，将其他选择框的状态设置为全选框状态
$("#all_checkbox").click(function () {
//获得全选框状态
var flag = $(this).prop("checked");

//设置其他选择框的状态为全选框的状态
$('input[type=checkbox][name=id]').prop("checked", flag);
});

// 当全部选中时，其他选择框有一个取消选中，全选框变为未选中；其他选择框变为全选中时，全选框变为选中, 功能实现。
// 实现思路：1.为其他选择框添加点击事件
// 2. 当点击后，获得当前所点击的选择框的状态
// 3. 如果当前选择框状态为未选中，设置全选框为未选中
// 4. 如果当前选择框状态为选中，检查其他选择框状态是否全部为选中，如果是设置全选框状态为选中
$('input[type=checkbox][name=id]').click(function () {
// 获得当前选择框的状态
var flag = $(this).prop("checked");
if (flag) {
//判断所有的是否都是选中状态，如果是设置全选框为选中
var isAll = true;
$('input[type=checkbox][name=id]').each(function () {
if (!$(this).prop("checked")) {
isAll = false;
return false;
}
});

if (isAll) {
$("#all_checkbox").prop("checked", true);
}

} else {
//有一个取消选中，全选框设置为未选中
$("#all_checkbox").prop("checked", false);
}
});
</script>
</html>

总结

我所写的例子是最基本需求，所写的目的是希望能够给你提供思路，请耐心看下去

转载于:https://my.oschina.net/u/3057539/blog/1838114

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航