分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 技术分享

JS实现全选、不选、反选

发布时间:2023-09-06 01:30责任编辑:赖小花关键词:暂无标签

思路:1、获取元素。2、用for循环历遍数组,把checkbox的checked设置为true即实现全选,把checkbox的checked设置为false即实现不选。3、通过if判断,如果checked为true选中状态的,就把checked设为false不选状态,如果checked为false不选状态的,就把checked设为true选中状态。

JS代码:

 1 <script> 2 window.onload=function(){ 3 ????var CheckAll=document.getElementById(‘All‘); 4 ????var UnCheck=document.getElementById(‘uncheck‘); 5 ????var OtherCheck=document.getElementById(‘othercheck‘); 6 ????var div=document.getElementById(‘div‘); 7 ????var ???CheckBox=div.getElementsByTagName(‘input‘); 8 ????CheckAll.onclick=function(){ 9 ????????????for(i=0;i<CheckBox.length;i++){10 ????????????????????CheckBox[i].checked=true;11 ????????????????};12 ????????};13 ????UnCheck.onclick=function(){14 ????????????for(i=0;i<CheckBox.length;i++){15 ????????????????????CheckBox[i].checked=false;16 ????????????????};17 ????????};18 ????othercheck.onclick=function(){19 ????????????for(i=0;i<CheckBox.length;i++){20 ????????????????????if(CheckBox[i].checked==true){21 ????????????????????????????CheckBox[i].checked=false;22 ????????????????????????}23 ????????????????????else{24 ????????????????????????CheckBox[i].checked=true25 ????????????????????????}26 ????????????????????27 ????????????????};28 ????????};29 };30 </script>

HTML代码:

 1 全选:<input type="button" id="All" value="全选" /><br /> 2 不选<input type="button" id="uncheck" value="不选" /><br /> 3 反选<input type="button" id="othercheck" value="反选" /><br /> 4 <div id="div"> 5 ????<input type="checkbox" /><br /> 6 ????<input type="checkbox" /><br /> 7 ????<input type="checkbox" /><br /> 8 ????<input type="checkbox" /><br /> 9 ????<input type="checkbox" /><br />10 ????<input type="checkbox" /><br />11 ????<input type="checkbox" /><br />12 ????<input type="checkbox" /><br />13 ????<input type="checkbox" /><br />14 ????<input type="checkbox" /><br />15 ????<input type="checkbox" /><br />16 ????<input type="checkbox" /><br />17 ????<input type="checkbox" /><br />18 ????<input type="checkbox" /><br />19 ????<input type="checkbox" /><br />20 ????<input type="checkbox" /><br />21 ????<input type="checkbox" /><br />22 ????<input type="checkbox" /><br />23 ????<input type="checkbox" /><br />24 ????<input type="checkbox" /><br />25 </div>

JS实现全选、不选、反选

原文地址:http://www.cnblogs.com/wszz/p/8036911.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved