全选和全不选
1、全选和全不选函数：
<script> function checkAll(){ var checkAllEle = document.getElementById("checkAll"); if(checkAllEle.checked==true){ var checkOnes = document.getElementsByName("checkOne"); for(var i=0;i<checkOnes.length;i++){ checkOnes[i].checked=true; } }else{ var checkOnes = document.getElementsByName("checkOne"); for(var i=0;i<checkOnes.length;i++){ checkOnes[i].checked=false; } } } </script>
getElementById要领：返回对拥有指定ID的第一个东西的引用。 getElementsByName要领：返回带有指命名称的东西的调集。<tr> <th><input type="checkbox"/></th> <th bgcolor="blanchedalmond "align="middle" >序号</th> <th bgcolor="blanchedalmond "align="middle ">学号</th> <th bgcolor="blanchedalmond "align="middle ">姓名</th> <th bgcolor="blanchedalmond "align="middle ">平时成效</th> <th bgcolor="blanchedalmond "align="middle ">期末成效</td> <th bgcolor="blanchedalmond "align="middle ">学期总成效</th> </tr> <tr> <td><input type="checkbox"/></td> <td>1</td> <td>20100300201</td> <td>张小丽</td> <td>95</td> <td>95</td> <td>95</td> </tr> <tr> <td><input type="checkbox"/></td> <td bgcolor="grey "align="middle ">2</td> <td bgcolor="grey "align="middle ">20100300202</td> <td bgcolor="grey "align="middle ">李宁</td> <td bgcolor="grey "align="middle ">90</td> <td bgcolor="grey "align="middle ">88</td> <td bgcolor="grey "align="middle ">89</td> </tr> <tr> <td><input type="checkbox"/></td> <td>3</td> <td>20100300203</td> <td>刘梅</td> <td>98</td> <td>92</td> <td>95</td> </tr> <tr> <td><input type="checkbox"/></td> <td bgcolor="grey "align="middle ">4</td> <td bgcolor="grey "align="middle ">20100300204</td> <td bgcolor="grey "align="middle ">王刚</td> <td bgcolor="grey "align="middle ">98</td> <td bgcolor="grey "align="middle ">90</td> <td bgcolor="grey "align="middle ">94</td> </tr> <tr> <td><input type="checkbox"/></td> <td>5</td> <td>20100300205</td> <td>郑军</td> <td>90</td> <td>85</td> <td>87</td> </tr> <tr> <td><input type="checkbox"/></td> <td bgcolor="grey "align="middle ">6</td> <td bgcolor="grey "align="middle ">20100300206</td> <td bgcolor="grey "align="middle ">杨波</td> <td bgcolor="grey "align="middle ">80</td> <td bgcolor="grey "align="middle ">80</td> <td bgcolor="grey "align="middle ">80</td> </tr>
getElementById要领获取的是与属性在同一行的复选框的状态，，如果已经选中就用getElementsByName要领获取一个调集，并对调集进行遍历将复选框的状态变为选中，否则，将复选框全部变为未选中。2、完整代码：
<html> <head> <meta charset="utf-8"> <title>全选和全不选</title> <script> function checkAll(){ var checkAllEle = document.getElementById("checkAll"); if(checkAllEle.checked==true){ var checkOnes = document.getElementsByName("checkOne"); for(var i=0;i<checkOnes.length;i++){ checkOnes[i].checked=true; } }else{ var checkOnes = document.getElementsByName("checkOne"); for(var i=0;i<checkOnes.length;i++){ checkOnes[i].checked=false; } } } </script> </head> <body> <table width="600" border="1" align="center" cellpadding="5" cellspacing="3"> <caption>成效登记表</caption> <tr> <th><input type="checkbox" onclick="checkAll()" id="checkAll"/></th> <th bgcolor="blanchedalmond "align="middle" >序号</th> <th bgcolor="blanchedalmond "align="middle ">学号</th> <th bgcolor="blanchedalmond "align="middle ">姓名</th> <th bgcolor="blanchedalmond "align="middle ">平时成效</th> <th bgcolor="blanchedalmond "align="middle ">期末成效</td> <th bgcolor="blanchedalmond "align="middle ">学期总成效</th> </tr> <tr> <td><input type="checkbox" name="checkOne"/></td> <td align="middle ">1</td> <td align="middle ">20100300201</td> <td align="middle ">张小丽</td> <td align="middle ">95</td> <td align="middle ">95</td> <td align="middle ">95</td> </tr> <tr> <td><input type="checkbox" name="checkOne"/></td> <td bgcolor="grey "align="middle ">2</td> <td bgcolor="grey "align="middle ">20100300202</td> <td bgcolor="grey "align="middle ">李宁</td> <td bgcolor="grey "align="middle ">90</td> <td bgcolor="grey "align="middle ">88</td> <td bgcolor="grey "align="middle ">89</td> </tr> <tr> <td><input type="checkbox" name="checkOne"/></td> <td align="middle ">3</td> <td align="middle ">20100300203</td> <td align="middle ">刘梅</td> <td align="middle ">98</td> <td align="middle ">92</td> <td align="middle ">95</td> </tr> <tr> <td><input type="checkbox" name="checkOne"/></td> <td bgcolor="grey "align="middle ">4</td> <td bgcolor="grey "align="middle ">20100300204</td> <td bgcolor="grey "align="middle ">王刚</td> <td bgcolor="grey "align="middle ">98</td> <td bgcolor="grey "align="middle ">90</td> <td bgcolor="grey "align="middle ">94</td> </tr> <tr> <td><input type="checkbox" name="checkOne"/></td> <td align="middle ">5</td> <td align="middle ">20100300205</td> <td align="middle ">郑军</td> <td align="middle ">90</td> <td align="middle ">85</td> <td align="middle ">87</td> </tr> <tr> <td><input type="checkbox" name="checkOne"/></td> <td bgcolor="grey "align="middle ">6</td> <td bgcolor="grey "align="middle ">20100300206</td> <td bgcolor="grey "align="middle ">杨波</td> <td bgcolor="grey "align="middle ">80</td> <td bgcolor="grey "align="middle ">80</td> <td bgcolor="grey "align="middle ">80</td> </tr> </table> </body> </html>
JS——全选和全不选
温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/31065.html
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")