本文实例为大家分享了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复选框操作汇总
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
js,全选,全不选
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
白云城资源网 Copyright www.dyhadc.com
暂无“js实现全选和全不选功能”评论...
更新日志
2024年05月06日
2024年05月06日
- 吴俊宏.2014-爱着你【豪记】【WAV+CUE】
- 名洋.1990-分手摆在胸口【天下唱片】【WAV+CUE】
- 罗大佑.2018-当年离家的年轻人巡回演唱会【大右音乐】【WAV+CUE】
- 姜育恒.1991-金曲精丫永声】【WAV+CUE】
- 水木年华.2010-启程【英皇星艺】【WAV+CUE】
- 邓丽君《漫步人生路》[DSF][1.3G]
- 林俊杰《学不会》[DSF][1.3G]
- 费玉清《Ultimate Sound》SACD 限量版[DSF][2G]
- 杨耀东.2002-经典金曲珍藏版2CD【东尼机构】【WAV+CUE】
- 新民樂演奏《春来人不来上海管弦楽團伴奏》[WAV+CUE].
- 玛吉阿米藏族民间歌舞艺术团-《仓央嘉措之歌》[ADMS][WAV+CUE]
- 王心凌《爱你》[FLAC][836M]
- 叶少菲《纯爱沉思录》[320K/MP3][120.43MB]
- 叶少菲《纯爱沉思录》[FLAC/分轨][330.3MB]
- 电子琴《汽车音响精品第三集第四集第五集》特效360度[WAV+CUE]