本文实例讲述了射流研究…实现的全选、全不选及反选功能。分享给大家供大家参考,具体如下:
效果图如下:点击全选时会全部选中;全不选时全部不选;反选时反向选中。
超文本标记语言结构代码:
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脚本语言程序设计有所帮助。