相信很多人经常会遇到全选或者不全选的情况，依然是淘宝上的购物车，而这个也可以用脚本来完成相应的功能。所以这篇博文主要是介绍相关的知识点。
一.案件要求
我们希望在后台系统实现一个批量删除操作(全选复选框)，显示效果如下:
第二，步骤分析
第一步，首先我们要实现这个页面；
第二步，选中all的复选框，按id选择；
第三步:在这个常规选择之后，还应该选择下面的，下面应该使用name元素。
推荐我的前端群:524262608。不管你是小白还是大牛，我都欢迎小编。不定期分享干货，包括一份前端资料和自己编的零基础入门教程。欢迎初学者和进阶的小伙伴。
第三，代码实现
<html><head><title>全选与全不选</title> <meta http-equiv="content-type" content="text/html;charset=UTF-8"><script>function chooseOrNot(){ var checkAll=document.getElementById("checkAll"); //alert(checkAll); if(checkAll.checked==true){ //alert("全选");//当这个复选框被选中，那就说明下面的复选框都回被选中var checkOnes=document.getElementsByName("checkOnes"); //alert(checkOnes);//在开发人员调试工具中可以看出这是一个***for(var i=0;i<checkOnes.length;i++){ checkOnes[i].checked=true; } }else{ var checkOnes=document.getElementsByName("checkOnes"); for(var i=0;i<checkOnes.length;i++){ checkOnes[i].checked=false; } } } </script></head><body><table border="1" align="center" width="500px"><tr><td colspan="4"><input type="button" value="添加"><input type="button" value="删除"> </td></tr><tr><td><input type="checkbox" id="checkAll" onclick="chooseOrNot()"></td><td>编号</td><td>姓名</td><td>年龄</td> </tr><tr><td><input type="checkbox" name="checkOnes"></td><td>1</td><td>张三</td><td>23</td> </tr><tr><td><input type="checkbox" name="checkOnes"></td><td>2</td><td>李四</td><td>31</td> </tr><tr><td><input type="checkbox" name="checkOnes"></td><td>3</td><td>王五</td><td>12</td> </tr><tr><td><input type="checkbox" name="checkOnes"></td><td>4</td><td>赵六</td><td>54</td> </tr><tr><td><input type="checkbox" name="checkOnes"></td><td>5</td><td>黄七</td><td>52</td> </tr><tr><td><input type="checkbox" name="checkOnes"></td><td>6</td><td>段九</td><td>12</td> </tr> </table></body></html>
实现效果如下:
四。JavaScript的DOM操作
介绍完上面的案例，下面是JavaScript & # 8230的DOM操作；
4.1什么是DOM？
DOM:文档对象模型，文档对象模型，定义了访问和操作结构化文档(HTML)的方式。
创建结构化文档:HTML、XML等。
DOM通常包括核心DOM、HTML DOM和XML DOM。通常，HTML DOM和XML DOM可以相互配合使用。
HTML将整个HTML文档呈现为一棵DOM树，书中有元素、属性、文本和其他成员。大致结构如下:
4.2文档对象
加载到浏览器中的每个HTML文档都成为一个文档对象。
以下两种方法很重要，但是手册上找不到！
创建一个文本节点:document.createTextNode()
创建元素节点:document.createElement()
4.3元素对象
什么是元素对象？我们所知道的html页面中的所有标签都是元素元素。
下面是一些关于元素的相关方法:
4.4属性对象
什么是属性对象？我们所知道的HTML中所有标签的属性都是属性对象。
推荐我的前端群:524262608。不管你是小白还是大牛，我都欢迎小编。不定期分享干货，包括一份前端资料和自己编的零基础入门教程。欢迎初学者和进阶的小伙伴。
本文来自牙可爱的骚云吖~投稿，不代表舒华文档立场，如若转载，请注明出处：https://www.chinashuhua.cn/24/539749.html
微信扫一扫 
