通过JavaScript实现页面复选框反选功能?
下面有个表格:
表格代码如下:
<table> <thead> <tr> <th><input type="checkbox" id="check"/>反选</th> <th>班级类型</th> <th>开班时间</th> <th>开班状态</th> </tr> </thead> <tbody id="tb"> <tr> <td> <input type="checkbox" /> </td> <td>基础班</td> <td>2021-08-31</td> <td>报满已开</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>基础班</td> <td>2021-09-11</td> <td>报满已开</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>高手班</td> <td>2021-08-05</td> <td>报满已开</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>高手班</td> <td>2021-09-28</td> <td>报满已开</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>高手班</td> <td>2021-11-11</td> <td>即将开班</td> </tr> </tbody> </table>
功能需求:实现反选功能
效果如下:
功能实现思路一:
- 为id="check"绑定click事件;
- 找到所有需要控制的input元素
- 通过循环遍历找到tbody中每个input
- 更改input的checked的值,如:false改为true
JavaScript代码如下:
<script> // 为id="check"绑定click事件; document.getElementById('check').onclick = function(){ // 找到所有需要控制的input元素 var inp = document.getElementsByTagName('input'); // 通过循环遍历找到tbody中每个input,需要控制的input元素是从第二个开始所以i =1 for(i=1; i <= inp.length; i++){ // 更改input的checkbox的值,如:false改为true,true改为false if( inp[i].checked == true){ inp[i].checked = false; }else{ inp[i].checked = true; } } } </script>
代码简化版:
<script> // 为id="check"绑定click事件; document.getElementById('check').onclick = function(){ // 找到所有需要控制的input元素 var inp = document.getElementsByTagName('input'); // 通过循环遍历找到tbody中每个input,需要控制的input元素是从第二个开始所以i =1 for(i =1; i <= inp.length; i++){ // checked值去反 inp[i].checked = !inp[i].checked; } } </script>
完整代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>通过JS实现反选功能|web前端高手班 http://web.itheima.com</title> <style> table { border-collapse: collapse; border-spacing: 0; border: 1px solid #c0c0c0; width: 500px; } th, td { border: 1px solid #d0d0d0; color: #404060; padding: 10px; text-align: center; } </style> </head> <body> <table> <thead> <tr> <th><input type="checkbox" id="check"/>反选</th> <th>班级类型</th> <th>开班时间</th> <th>开班状态</th> </tr> </thead> <tbody id="tb"> <tr> <td> <input type="checkbox" /> </td> <td>基础班</td> <td>2021-08-31</td> <td>报满已开</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>基础班</td> <td>2021-09-11</td> <td>报满已开</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>高手班</td> <td>2021-08-05</td> <td>报满已开</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>高手班</td> <td>2021-09-28</td> <td>报满已开</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>高手班</td> <td>2021-11-11</td> <td>即将开班</td> </tr> </tbody> </table> <script> // 为id="check"绑定click事件; document.getElementById('check').onclick = function(){ // 找到所有需要控制的input元素 var inp = document.getElementsByTagName('input'); // 通过循环遍历找到tbody中每个input,需要控制的input元素是从第二个开始所以i =1 for(i =1; i <= inp.length; i++){ // checked值去反 inp[i].checked = !inp[i].checked; } } </script> </body> </html>
想想上面表格如何实现鼠标悬浮对应表格变色呢?
可以参考下面文章: