---恢复内容开始---
1.昨日作业讲解
弄一个上图一样的选择器,可以全选,可以反选,取消
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*table{border: 2px solid black}*/ </style> <script> //写一个函数 当触发按钮的时候执行这个函数 function quanxuan(){ //全选,先找出按钮对象 var qelems=document.getElementsByClassName('c1'); //循环取出所有的所有的对象,并将他的checked属性写为true, for (var i=0;i<qelems.length;i++){ //checked 属性 为true的时候选中,是false时候取消选中 qelems[i].checked=true; } } function fanxuan(){ //全选,先找出按钮对象 var qelems=document.getElementsByClassName('c1'); //循环取出所有的所有的对象,并将他的checked属性写为true, for (var i=0;i<qelems.length;i++){ //checked 属性 为true的时候选中,是false时候取消选中 //在循环中找出属性为true的设置为false 将为false的设置为true if (qelems[i].checked==true){qelems[i].checked=false;}else {qelems[i].checked=true;} } } function quxiao(){ var qelems=document.getElementsByClassName('c1'); //循环取出所有的所有的对象,并将他的checked属性写为false, for (var i=0;i<qelems.length;i++){ //checked 属性 为true的时候选中,是false时候取消选中 qelems[i].checked=false; }} </script> </head> <body> <!--table 里边的border是特殊属性,不是style 里的, 不能直接在哪儿设置--> <table border="8"> <thead> <tr> <th>序号</th> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td ><input class="c1" type="checkbox" ></td> <td>alex</td> <td>18</td> </tr> <tr> <td ><input class="c1" type="checkbox" ></td> <td>agon</td> <td>18</td> </tr> <tr> <td ><input class="c1" type="checkbox" class="c2" ></td> <td>haha</td> <td>18</td> </tr> </tbody> </table> <input type="button" value="全选" onclick="quanxuan();"> <input type="button" value="反选" onclick="fanxuan();"> <input type="button" value="取消" onclick="quxiao();"> </body> </html>