HTML代码:
<!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> <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>
效果:
点击则全选中,再次点击取消全选
DOM的简单应用:
动态添加:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>动态添加城市</title> <script> window.onload = function() { document.getElementById("btn").onclick = function() { //1.获取ul元素节点 var ulEle = document.getElementById("ul1"); //2.创建城市文本节点 var textNode = document.createTextNode("深圳"); //深圳 //3.创建li元素节点 var liEle = document.createElement("li"); //<li></li> //4.将城市文本节点添加到li元素节点中去 liEle.appendChild(textNode); //<li>深圳</li> //5.将li添加到ul中去 ulEle.appendChild(liEle); } } </script> </head> <body> <input type="button" value="添加新城市" id="btn" /> <ul id="ul1"> <li>北京</li> <li>上海</li> <li>广州</li> </ul> </body> </html>