js实现全选和全不选功能
更新时间：2020年07月28日 14:18:25 作者：哀愁
这篇文章主要为大家详细介绍了js实现全选和全不选功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js实现全选和全不选的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>操作复选框</title>
</head>
<body>
<input type="checkbox" id="quan"> 全选<br>
<input type="checkbox" name="aihao">游戏<br>
<input type="checkbox" name="aihao">睡觉<br>
</body>
</html>
<script type="text/javascript">
window.onload=function () {
var firstChecbox = document.getElementById("quan");
var aihao=document.getElementsByName("aihao");
//完成全选和全不选
//当单击全选时使下方的checkbox中的checked属性为true
firstChecbox.onclick=function () {
//遍历下方的checkbox
//使每一个复选框的属性中的checked和全选的属性保持一致即可实现（不完善）
for (let i = 0; i <aihao.length ; i++) {
aihao[i].checked=firstChecbox.checked;
}
}
//如果选中的数量和爱好的总数量一致的就把全选给选中，否则不全选
//为每一个aihao绑定单击事件
var all=aihao.length;
for (let i = 0; i < aihao.length; i++) {
//绑定单击事件
aihao[i].onclick=function () {
//定义选中的数量
var checkedCount=0;
for (let i = 0; i < aihao.length; i++) {
//如果爱好选中就把选中的数量+1;
if (aihao[i].checked){
checkedCount++;
}
//如果选中的数量和总数相当就把全选给勾选
if (checkedCount==all){
firstChecbox.checked=true
}
else{
firstChecbox.checked=false;
}
}
}
}
}
</script>
更多关于复选框的文章请点击专题：javascript复选框操作汇总、jquery复选框操作汇总
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家介绍了json格式判断函数速记示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-11-11
这篇文章主要介绍了javascript实现行拖动的方法,涉及javascript鼠标事件及页面元素的相关操作技巧,需要的朋友可以参考下2015-05-05
本段js和html两段代码实现分页控件效果，下面通过本文给大家详细介绍下基于KO+BootStrap+MVC实现的分页控件，非常不错，感兴趣的朋友一起看看吧2016-11-11
这篇文章主要介绍了JavaScript函数重载操作,结合一次面试经历分析了JavaScript函数重载相关原理、用法及操作注意事项,需要的朋友可以参考下2020-05-05
js提示框替代系统alert,自动关闭alert对话框的实现方法
下面小编就为大家带来一篇js提示框替代系统alert,自动关闭alert对话框的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
下面小编就为大家带来一篇js数字计算 误差问题的快速解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
这篇文章主要为大家详细介绍了JavaScript Html实现移动端红包雨功能页面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-01-01
本文介绍了如何使用Javascript中的this关键字，文中代码简单易懂，对大家的学习或工作有一定帮助，需要的朋友可以参考下2020-05-05
这篇文章主要给大家介绍了关于uniapp h5如何获取用户地理位置信息的相关资料,文中主要使用高德地图,这里主要讲h5实现获取地理位置信息并定位功能,需要的朋友可以参考下2023-08-08
因为使用 Cycle.js 的 Vite + TSX 所以想详细的探索 TSX 在 TS 配置中的编译情况,本文主要讲解 tsconfig 和 tsx 编译与配置,以常见的框架 PReact 的虚拟 DOM + TSX 组合、snabbdom + TSX 组合不同的配置以及编译输出2023-09-09
最新评论