JS全选与不选、反选
思路：
1、获取元素。
2、用for循环历遍数组，把checkbox的checked设置为true即实现全选，把checkbox的checked设置为false即实现不选。
3、通过if判断，如果checked为true选中状态的，就把checked设为false不选状态，如果checked为false不选状态的，就把checked设为true选中状态。
<!DOCTYPE html>
<html> <head><meta charset="UTF-8"></head> <body> <div id="div"> <input type="checkbox" /><br /> <input type="checkbox" /><br /> <input type="checkbox" /><br /> </div> <input type="button" value="全选" onclick="CheckAll()"/><br /> <input type="button" value="不选" onclick="UnCheck()"/><br /> <input type="button" value="反选" onclick="othercheck()"/><br /> <script> var CheckBox=div.getElementsByTagName('input'); //全选 function CheckAll(){ for(i=0;i<CheckBox.length;i++){CheckBox[i].checked=true;}; }; //不选 function UnCheck(){ for(i=0;i<CheckBox.length;i++){CheckBox[i].checked=false;}; }; //反选 function othercheck(){ for(i=0;i<CheckBox.length;i++){ if(CheckBox[i].checked==true){ CheckBox[i].checked=false;} else{ CheckBox[i].checked=true} } }; </script> </body>JS全选与不选、反选的更多相关文章
- JS实现全选、不选、反选
思路:1.获取元素.2.用for循环历遍数组,把checkbox的checked设置为true即实现全选,把checkbox的checked设置为false即实现不选.3.通过if判断,如果check ...
- 简单JS全选、反选代码
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org ...
- JS全选功能代码优化
原文:JS全选功能代码优化 JS全选功能代码优化 最近在看javascript MVC那本书,也感觉到自己写的代码也并不优雅,所以一直在想 用另一种模式来编写JS代码,所以针对之前的简单的JS全选功能 ...
- springMvc接收ajax数组参数，以及jquery复选框选中、反选、全选、全不选
一.复选框选中.反选.全选.全不选 html代码: <input type='checkbox' name='menuCheckBox' value='10' >苹果 <input ...
- jquery实现全选，取消，反选的功能&实现左侧菜单
1.全选,取消,反选的例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- jQuery实现全选、不选和反选功能
jQuery结合Font Awesome字体图标实现全选.不选和反选功能 Font Awesome字体图标链接地址:http://www.fontawesome.com.cn/faicons/ 效果: ...
- jquery实现全选、不选、反选的两种方法
在取复选框checkbox的属性checked属性值时,发现一个问题,就是当用attr取值时,真的为"checked",假的为"undefined";当用pro ...
- Java 多选框的全选、多选、反选（JQuery 实现）
jQuery 实现全选.多选.反选 学习内容: 需求 总结: 学习内容: 需求 jQuery 实现全选.多选.反选 实现代码 <!DOCTYPE html> <html lang=& ...
- JS全选按钮练习
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- 原生JS实现全选和不全选
案例演示 源代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...
随机推荐
- 如何让eclipse在程序修改后，点击运行可以自动保存。
preferences>run/debug>launching里面save required dirty editors before launching选always就自动保存咯选pro ...
- 201521123060 《Java程序设计》第5周学习总结
1.本周学习总结 2.书面作业 Q1.代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译通过?哪句会出现错误?试改正该错误.并分析输出结果. 答:不能 ...
- 201521123068《Java程序设计》第3周学习总结
1. 本周学习总结 点击查看大图->(http://naotu.baidu.com/file/7921c1cda46d65d08f2ef0d7a6af6651?token=3a35cbe7720 ...
- java201521123118《java程序设计》第3周总结
1. 本周学习 总结初学面向对象,会学习到很多碎片化的概念与知识.尝试学会使用思维导图将这些碎片化的概念.知识组织起来.请使用纸笔或者下面的工具画出本周学习到的知识点.截图或者拍照上传. 2. 书面作 ...
- 201521123008《Java程序设计》第1周学习总结
本周学习总结 了解了JAVA:jdk:jre:jvm等 C语音与JAVA的部分区别: C语言全面向过程,java面向对象: C语言的代码不能跨平台,java的代码可以跨平台: C语言有指针,java没 ...
- 201521123089 《Java程序设计》第11周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 本次PTA作业题集多线程 Q1.互斥访问与同步访问 1.1 除了使用synchronized修饰方 ...
- 关于学习Python的一些心得
1.关注函数参数的类型,如列表,字符串,int,而不是关注函数的功能 2.导入模块numpy,dir(numpy) 查看所有属性 3.''.join(列表) 将列表拆成字符串
- webservice第一篇【介绍、Scoket、http调用、wsimport调用】
WebService介绍 首先我们来谈一下为什么需要学习webService这样的一个技术吧-. 问题一 如果我们的网站需要提供一个天气预报这样一个需求的话,那我们该怎么做????? 天气预报这么一个 ...
- Lucene 搜索的初步探究
搜索应用程序和 Lucene 之间的关系 一般的搜索引擎都会采用这样的 Lucene 采用的是一种称为反向索引(inverted index)的机制.反向索引就是说我们维护了一个词 / 短语表,对于这 ...
- ng-file-upload（在单文件选择，并且通过点击“上传”按钮上传文件的情况下，如何在真正选择文件之前保留上一文件信息？）
文章前面研究ng-file-upload可能涉及指令: You can use ng-model or ngf-change instead of specifying function for ng ...