案例一：全选等
运用知识点：ondblclick=（）| onclick | 寻找标签属性及判断和函数的应用
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div> <input type="button" value="全选" ondblclick="checkAll()" /> <input type="button" value="取消" ondblclick="cancleAll()" /> <input type="button" value="反选" ondblclick="reverseAll()" /> </div> <table> <thead> <tr> <th>序列号</th> <th>用户名</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox"/></td> <td>alex</td> <td>19</td> </tr> <tr> <td><input type="checkbox"/></td> <td>alex</td> <td>19</td> </tr> <tr> <td><input type="checkbox"/></td> <td>alex</td> <td>19</td> </tr> <tr> <td><input type="checkbox"/></td> <td>alex</td> <td>19</td> </tr> </tbody> </table> <script> //全选的话先获取所有的input标签属性，然后全部为true function checkAll(){ var tb = document.getElementById('tb');//获取tb，也就是身体 var checks = tb.getElementsByClassName('c1'); //[第一个，2，3，4，5]checked = true for (var i=0;i<checks.length; i++){ var current_check = checks[i];//得到每个input的值并赋一个变量名 current_check.checked = true; } } function cancleAll(){ var tb = document.getElementById('tb');//获取tb，也就是身体 var checks = tb.getElementsByClassName('c1'); //[第一个，2，3，4，5]checked = true for (var i=0;i<checks.length; i++){ var current_check = checks[i];//得到每个input的值并赋一个变量名 current_check.checked = false; } } function reverseAll(){ var tb = document.getElementById('tb');//获取tb，也就是身体 var checks = tb.getElementsByClassName('c1'); //[第一个，2，3，4，5]checked = true for (var i=0;i<checks.length; i++){ var current_check = checks[i];//得到每个input的值并赋一个变量名 if(current_check.checked <!--这个地方如果为true-->){ current_check.checked = false; }else{ current_check.checked = true; } } } </script> </body> </html>
案例二：单选
要求只能选一个，并且用js可以改变其选项
运用知识点：getElementsByTagName | checked | 互斥