前言
复选框的全选功能目前有很多插件可以实现，其实你如果自己来实现的话，会发现其实也写不了几行代码。
实现
<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>
总结
我所写的例子是最基本需求，所写的目的是希望能够给你提供思路，请耐心看下去
451
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
