In diesem Artikel teilen wir Ihnen ein wenig Wissen über js und wie Sie „Alle auswählen“ und „Alle abwählen“ in js implementieren. Wir hoffen, dass es allen helfen kann.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>全选和全不选</title> <script> function checkAll(){ //1.获取编号前面的复选框 var checkAllEle = document.getElementById("checkAll"); //2.对编号前面复选框的状态进行判断 if(checkAllEle.checked==true){ //3.获取下面所有的复选框 var checkOnes = document.getElementsByName("checkOne"); //4.对获取的所有复选框进行遍历 for(var i=0;i<checkOnes.length;i++){ //5.拿到每一个复选框,并将其状态置为选中 checkOnes[i].checked=true; } }else{ //6.获取下面所有的复选框 var checkOnes = document.getElementsByName("checkOne"); //7.对获取的所有复选框进行遍历 for(var i=0;i<checkOnes.length;i++){ //8.拿到每一个复选框,并将其状态置为未选中 checkOnes[i].checked=false; } } } </script> </head> <body> <table border="1" width="500" height="50" align="center" > <thead> <tr> <td colspan="4"> <input type="button" value="添加" /> <input type="button" value="删除" /> </td> </tr> <tr> <th><input type="checkbox" onclick="checkAll()" id="checkAll"/></th> <th>编号</th> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody> <tr > <td><input type="checkbox" name="checkOne"/></td> <td>1</td> <td>张三</td> <td>22</td> </tr> <tr > <td><input type="checkbox" name="checkOne"/></td> <td>2</td> <td>李四</td> <td>25</td> </tr> <tr > <td><input type="checkbox" name="checkOne"/></td> <td>3</td> <td>王五</td> <td>27</td> </tr> <tr > <td><input type="checkbox" name="checkOne"/></td> <td>4</td> <td>赵六</td> <td>29</td> </tr> <tr > <td><input type="checkbox" name="checkOne"/></td> <td>5</td> <td>田七</td> <td>30</td> </tr> <tr > <td><input type="checkbox" name="checkOne"/></td> <td>6</td> <td>汾九</td> <td>20</td> </tr> </tbody> </table> </body> </html>
Verwandte Empfehlungen:
JQuery zur Implementierung von „Alle auswählen“, Beispielcode für umgekehrte Auswahl (empfohlen)
Jquery „Alle auswählen“ teilen und umgekehrte Auswahl Beispiel
Das obige ist der detaillierte Inhalt vonjs zum Implementieren von „Alle' und „Keine' auswählen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!