全选与全不选
思路分析
- 绑定事件:绑定复选框的点击事件,编写函数
- 判断复选框的状态:复选框是否被选中
- 如果复选框状态被选中,则下面的所有复选框被选中
- 如果复选框状态未被选中,则下面的所有复选框不选中
实现步骤
- 获取头部复选框对象,绑定点击事件,编写函数
- 获取头部复选框的选中状态
- 获取下面的所有复选框
- 遍历下面的所有复选框
- 根据头部复选框的状态,设置遍历得到的每一个复选框的状态为选中/不选中
反选
思路分析
- 绑定事件:反选按钮绑定点击事件
- 获取复选框:获取下面所有的复选框
- 遍历复选框:判断每一个复选框的状态
- 如果本身选中,则取消选中;如果本身未选中,则选中
实现步骤
- 绑定反选按钮的点击事件编写函数
- 获取下面的所有复选框
- 遍历下面所有的复选框
- 根据遍历得到的每一个复选框的状态,如果选中,则取消选中,如果未选择,则选中
JS版本
<script type="text/javascript">
// 全选与全不选
// 1.获取头部复选框对象,绑定点击事件,编写函数
document.getElementById("all").onclick = function() {
// 2.获取头部复选框的选中状态
var flag = document.getElementById("all").checked;
// 3.获取下面的所有复选框
var cks = document.getElementsByName("ck");
// 4.遍历下面的所有复选框
for (var i = 0; i < cks.length; i++) {
// 判断头部复选框的状态
if (flag) {// 全选
cks[i].checked = true;
} else {// 全不选
cks[i].checked = false;
}
}
}
// 反选
// 1.绑定反选按钮的点击事件编写函数
function CheckNot() {
// 2.获取下面的所有复选框
var cks = document.getElementsByName("ck")
// 3.遍历下面所有的复选框
for (var i = 0; i < cks.length; i++) {
// 4.根据遍历得到的每一个复选框的状态,如果选中,则取消选中,如果未选择,则选中
if (cks[i].checked) {
cks[i].checked = false;
} else {
cks[i].checked = true;
}
}
}
</script>
jQuery版本
<script type="text/javascript">
// 全选与全不选
$("#all").click(function(){
// 选择所有name属性为ck的复选框
// 获取头部复选框的状态
// 设置下面的复选框状态与头部复选框的状态一致 prop()
$(":checkbox[name = 'ck']").prop("checked",$("#all").prop("checked"));
})
// 反选
// 给反选按钮绑定点击事件
function CheckNot() {
// 获取下面所有复选框,设置每个复选框的反状态(选中改为不选中,不选中改为选中)
$(":checkbox[name = 'ck']").each(function(){
$(this).prop("checked",!$(this).prop("checked"));
});
}
</script>
注意事项
-
注意HTML结构:在实现全选、全不选和反选时,需要注意HTML结构。通常使用checkbox作为选择器,需要将所有的checkbox放在同一个父元素下,方便操作。
-
绑定事件:需要为全选、全不选和反选按钮绑定事件,通常使用click事件。在事件处理函数中,可以通过遍历所有的checkbox来实现相应的功能。
-
适配不同情况:在实现全选、全不选和反选时,需要考虑不同情况下的需求。例如,当部分checkbox被选中时,全选按钮应该变为半选状态;当所有checkbox都被选中时,全选按钮应该变为选中状态。
运用知识
- DOM操作、数组操作、条件判断、事件处理等。
应用场景
在购物车中,用户需要选择多个商品进行结算,可以使用全选、全不选和反选功能。
在管理系统中,用户需要对多个数据项进行批量操作,可以使用全选、全不选和反选功能。
在电子邮件或消息管理中,用户需要对多个邮件或消息进行批量操作,可以使用全选、全不选和反选功能。
案例优化方案
优化HTML结构:将所有的多选框或复选框放在同一个父元素下,方便操作。
避免重复查询DOM:使用变量来存储多选框或复选框的状态,避免重复查询DOM。
使用事件委托:使用事件委托来监听全选、全不选和反选按钮的点击事件,避免给每个按钮都绑定事件。
使用节流函数:在处理多选框或复选框状态变化时,可以使用节流函数来减少DOM操作的频率,提高性能。
优化全选状态:当所有多选框或复选框都被选中时,应该将全选按钮的状态设置为选中状态;当所有多选框或复选框都未被选中时,应该将全选按钮的状态设置为未选中状态。
优化反选功能:在实现反选功能时,可以将当前选中的多选框或复选框的状态取反,避免对所有多选框或复选框都进行操作