实现复选框的多选功能
Posted yingleiming
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了实现复选框的多选功能相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>管理员列表</title> <style> *{ margin:0; padding:0; } table{ width: 500px; margin:auto; border-collapse: collapse; } th,td{ text-align: center; border:1px solid #000; } h1{ text-align: center; margin:100px 0 20px 0; } </style> </head> <body> <h1>管理员列表</h1> <table id="data"> <thead> <tr> <th> <input name="choose" type="checkbox" class="checked" value="全选" onclick="selectAll(this)"> </th> <th>管理员ID</th> <th>姓名</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td><input name="choose" type="checkbox"></td> <td>1</td> <td>Tester</td> <td> <button>修改</button> <button>删除</button> </td> </tr> <tr> <td><input name="choose" type="checkbox"></td> <td>2</td> <td>Manager</td> <td> <button>修改</button> <button>删除</button> </td> </tr> <tr> <td><input name="choose" type="checkbox"></td> <td>3</td> <td>Analyst</td> <td> <button>修改</button> <button>删除</button> </td> </tr> <tr> <td><input name="choose" type="checkbox"></td> <td>4</td> <td>Admin</td> <td> <button>修改</button> <button>删除</button> </td> </tr> </tbody> </table> <script> // 全选或者取消全选 function selectAll(chb) { // 获得id为data的table下tbody下的tr下的第一个td中的input，保存在变量chbs中 var data=document.getElementById("data"); chbs=data.querySelectorAll("tbody>tr>td:first-child>input"); // 遍历chbs中的每一个chb for(var i=0;i<chbs.length;i++){ // 设置当前chb的checked等于chb的checked chbs[i].checked=chb.checked; } } window.onload=function () { // 获得id为data的table下tbody下的tr下的第一个td中的input，保存在变量chbs中 var data=document.getElementById("data"); chbs=data.querySelectorAll("tbody>tr>td:first-child>input"); // 遍历chbs中的每一个chb for(var i=0;i<chbs.length;i++){ // 设置当前chb的onclick=selectOne; chbs[i].onclick=selectOne; } } function selectOne() {//选中或取消选中一个chb // this-->当前选中的chb // 获得data下thead下的第一个th下的input，保存在变量selAll中 var selAll=data.querySelector("thead>tr>th:first-child>input"); // 如果当前chb的checked是false if(this.checked==false){ // 将selAll的checked改为false selAll.checked=false; }else {//否则 // 获得id为data下的tbody下tr下的第一个td中的input，保存在变量chbs中 var chbs=data.querySelectorAll("tbody>tr>td:first-child>input"); for(var i=0;i<chbs.length;i++){//遍历chbs下每个chb // 如果当前chb没有被选中，则直接返回 if(chbs[i].checked==false){return} }//遍历结束 // 将selAll的checked改为true selAll.checked=true; } } </script> </body> </html>
以上是关于实现复选框的多选功能的主要内容，如果未能解决你的问题，请参考以下文章