JS对表单中的style的操作,包括复选框技术
废话不多说直接上文件代码!!!
功能:全选反选,鼠标监测变颜色
<html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <table border="1" width="900px" align="center"> <tr align="center" > <th ><input type="checkbox" id="selAll"/>全选/全不选</th> <th >序号</th> <th >分类名称</th> <th >分类描述</th> <th >操作</th> </tr> <tr> <td ><input type="checkbox" name="cname"/></td> <td >1</td> <td >手机数码</td> <td >手机数码商品类</td> <td ><a href="">修改 </a><a href=""> 删除</a> </td> </tr> <tr> <td ><input type="checkbox" name="cname"/></td> <td >2</td> <td >手机数码</td> <td >手机数码商品类</td> <td ><a href="">修改 </a><a href=""> 删除</a> </td> </tr> <tr> <td ><input type="checkbox" name="cname"/></td> <td >3</td> <td >手机数码</td> <td >手机数码商品类</td> <td ><a href="">修改 </a><a href=""> 删除</a> </td> </tr> <tr id> <td ><input type="checkbox" name="cname"/></td> <td >4</td> <td >手机数码</td> <td >手机数码商品类</td> <td ><a href="">修改 </a><a href=""> 删除</a> </td> </tr> <tr > <td ><input type="checkbox" name="cname"/></td> <td >5</td> <td >手机数码</td> <td >手机数码商品类</td> <td ><a href="">修改 </a><a href=""> 删除</a> </td> </tr> <tr > <td ><input type="checkbox" name="cname"/></td> <td >6</td> <td >手机数码</td> <td >手机数码商品类</td> <td ><a href="">修改 </a><a href=""> 删除</a> </td> </tr> </table> </body> <script type="text/javascript"> var color = ""; /*加载所有页面*/ window.onload = function(){ var trs = document.getElementsByTagName("tr") for(var i = 0; i < trs.length ; i++){ if(i % 2){ trs[i].style.backgroundColor = "darkgrey"; } } for(var i = 0; i < trs.length;i++){ trs[i].onmouseover = function(){ color = this.style.backgroundColor; this.style.backgroundColor = "green"; /*trs[i].style.backgroundColor = "darkslateblue";*/ } trs[i].onmouseout = function(){ this.style.backgroundColor = color; } } /*为selAll复选框绑定点击事件*/ var selAllObj = document.getElementById("selAll"); selAllObj.onclick = function() { //判断selAll复选框选中状态 if(this.checked) { //如果当前的复选框是处于不选中状态，获取到所有非selAll复选框，返回数组，遍历数组为数组中的每个复选框设置checked=true //通过各个表单组件的class属性的值来获取一组表单组件 //document.getElementsByClassName(""); //通过各个表单组件的name属性的值来获取一组表单组件 var checkboxes = document.getElementsByName("cname"); for(var i = 0; i < checkboxes.length; i++) { checkboxes[i].checked = true; } } else { //如果当前的复选框是处于选中状态，获取到所有非selAll复选框，返回数组，遍历数组为数组中的每个复选框设置checked=false var checkboxes = document.getElementsByName("cname"); for(var i = 0; i < checkboxes.length; i++) { checkboxes[i].checked = false; } } } //为所有的name为cname的复选框绑定点击事件 var checkboxes = document.getElementsByName("cname"); //所有的name为cname的复选框个数 var allLength=checkboxes.length; //存放选中的复选框个数 var length02=0; for(var i=0;i<checkboxes.length;i++){ checkboxes[i].onclick=function(){ if(this.checked){ length02++; }else{ length02--; } console.log(allLength); console.log(length02); if(allLength==length02){ document.getElementById("selAll").checked=true; }else{ document.getElementById("selAll").checked=false; } } } } </script> </html>
效果图:
