JS实现的全选、全不选及反选功能【案例】

本文实例讲述了射流研究…实现的全选、全不选及反选功能。分享给大家供大家参考，具体如下：

效果图如下：点击全选时会全部选中；全不选时全部不选；反选时反向选中。

超文本标记语言结构代码：

input class=' check ' type=' checkbox ' input class=' check ' type=' checkbox ' input class=' check ' type=' checkbox ' input class=' check ' type=' checkbox ' input class=' check ' type=' checkAll ' type=' button ' value='全选输入id='unCheckAll '类型='按钮'值='全不输入id='reverseCheck '类型='按钮'值='反选爪哇岛描述语言代码如下：

脚本/*一：需求分析： (1)点击全选：选中所有选择框（设置检查属性为真)(2)点击全不选：不选中所有选择框（设置检查属性为假)3)点击反选：让每一个选择框的检查属性与自身相反二：思路分析1.获取元素2.注册事件3.事件处理*///1.获取页面元素var checkAll=文档。getelementbyid(' CheckAll ')；//全选var unCheckAll=文档。getelementbyid(' unCheckAll ')；//全不选var反向检查=文档。getelementbyid('反向检查')；//反选定义变量核对表=文档。getelementsbyclassname(' check ')；//选择框列表//2.注册事件//2.1 全选检查所有。onclick=function(){//3 .事件处理：选中所有选择框（设置检查属性为真)表示(var I=0；ichecklist . lengthi){ 0核对表[i].选中=真；} } //2.2 全不选取消勾选。onclick=function(){//3 .事件处理：不选中所有选择框（设置检查属性为假)表示(var I=0；ichecklist . lengthi){ 0核对表[i].选中=假；} } //2.3 反选反向检查。onclick=function(){//3 .事件处理：让每一个选择框的检查属性与自身相反for(var I=0；ichecklist . lengthi){ 0核对表[i].选中=!清单[i].已检查；//逻辑非取反//if(核对表[i]).选中==true){ //核对表[i].选中=假；//}else{//false //核对表[i].选中=真；//} } }/脚本完整示例代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title www .JB 51。net JS全选、全不选、反选/title/head dyinput class=' check ' type=' checkbox ' input class=' check ' type=' checkbox ' input class=' check ' type=' checkbox ' input class=' checkbox ' input class=' check ' type=' button ' value='全选输入id='unCheckAll '类型='按钮'值='全不输入id='reverseCheck '类型='按钮'值='反选脚本/*一：需求分析： (1)点击全选：选中所有选择框（设置检查属性为真)(2)点击全不选：不选中所有选择框（设置检查属性为假)3)点击反选：让每一个选择框的检查属性与自身相反二：思路分析1.获取元素2.注册事件3.事件处理*///1.获取页面元素var checkAll=文档。getelementbyid(' CheckAll ')；//全选var unCheckAll=文档。getelementbyid(' unCheckAll ')；//全不选var反向检查=文档。getelementbyid('反向检查')；//反选定义变量核对表=文档。getelementsbyclassname(' check ')；//选择框列表//2.注册事件//2.1 全选检查所有。onclick=function(){//3 .事件处理：选中所有选择框（设置检查属性为真)表示(var I=0；ichecklist . lengthi){ 0核对表[i].选中=真；} } //2.2 全不选取消勾选。onclick=function(){//3 .事件处理：不选中所有选择框（设置检查属性为假)表示(var I=0；ichecklist . lengthi){ 0核对表[i].选中=假；} } //2.3 反选反向检查。onclick=function(){//3 .事件处理：让每一个选择框的检查属性与自身相反for(var I=0；ichecklist . lengthi){ 0核对表[i].选中=!清单[i].已检查；//逻辑非取反//if(核对表[i]).选中==true){ //核对表[i].选中=假；//}else{//false //核对表[i].选中=真；//} } }/脚本/正文/html感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://工具。JB 51。net/code/HTMljsrun测试上述代码运行效果。

更多关于Java脚本语言相关内容感兴趣的读者可查看本站专题： 《JavaScript操作DOM技巧总结》 、 《JavaScript页面元素操作技巧总结》 、 《JavaScript事件相关操作与技巧大全》 、 《JavaScript查找算法技巧总结》 、 《JavaScript数据结构与算法技巧总结》 、 《JavaScript遍历算法与技巧总结》 及《JavaScript错误与调试技巧总结》

希望本文所述对大家Java脚本语言程序设计有所帮助。