大家好，我是今天的博主，<一个想做全栈的咸鱼> 今天跟大家一起学习一下复选框中的全选和全不选
确定事件鼠标单击事件onclick，事件绑定到编号其那面的复选框里面
获取编号前面的复选框的状态（是否选中）
获取复选框:var checkALLEle = ElementById(“id”);
获取复选框的状态：checkALLEle.checked
获取下面所有的复选框：
ElementByName(“name”);
步骤分析：
1、确定事件onclick,并且绑定一个函数
2、书写函数获取编号前的复选框，获取其状态
3、判断编号前面复选框的状态（如果为选中，获取下面所有的复选框，并将其状态置为选中）
4、判断编号前面复选框的状态（如果为未选中，获取下面所有的复选框，并将其状态置为未选中）
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>全选和全不选</title><script>function checkAll(){//1.获取编号前面的复选框var checkAllEle = ElementById("checkAll");//2.对编号前面复选框的状态进行判断if(checkAllEle.checked==true){//3.获取下面所有的复选框var checkOnes = ElementsByName("checkOne");//4.对获取的所有复选框进行遍历for(var i=0;i<checkOnes.length;i++){//5.拿到每一个复选框，并将其状态置为选中checkOnes[i].checked=true;}}else{//6.获取下面所有的复选框var checkOnes = ElementsByName("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" cellpadding="0" cellspacing="0"><thead><tr><td colspan="4" height="40px"><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 align="center"><td><input type="checkbox" name="checkOne"/></td><td>1</td><td>张三</td><td>22</td></tr><tr align="center"><td><input type="checkbox" name="checkOne"/></td><td>2</td><td>李四</td><td>25</td></tr><tr align="center"><td><input type="checkbox" name="checkOne"/></td><td>3</td><td>王五</td><td>27</td></tr><tr align="center"><td><input type="checkbox" name="checkOne"/></td><td>4</td><td>赵六</td><td>29</td></tr><tr align="center"><td><input type="checkbox" name="checkOne"/></td><td>5</td><td>田七</td><td>30</td></tr><tr align="center"><td><input type="checkbox" name="checkOne"/></td><td>6</td><td>汾九</td><td>20</td></tr></tbody></table></body>
</html>
希望可以帮助到大家，我们下次再见，我还是那个咸鱼!
本文发布于:2024-01-29 14:41:50，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170651051216001.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
