js05 全选全不选
案例4:全选或者全不选
步骤分析:
1.确定事件 最上面那个复选框的单击事件 onclick
2.编写函数:让所有的复选框和最上面的复选框状态保持一致
a.获取最上面这个复选框选中状态 通过checkbox的checked属性即可
b.获取其他的复选框,设置他们的checked属性即可
可以通过以下两种方案获取元素
document.getElementsByClassName():需要给下面所有的复选框添加class属性
document.getElementsByName():需要给下面所有的复选框添加name属性
//全选 方法名 不能使用 关键字 否则无效
function checkAll(obj) {
//获取所有的复选框
var arr = document.getElementsByName('pid');
//便利数组修改状态
for (var i = 0; i < arr.length; i++) {
arr[i].checked = obj.checked;
}
}
<script>
function sele(obj) {
//alert("选中了");
var arr=document.getElementsByName("all");
//alert(arr);
for (var i=0;i<arr.length;i++) {
//alert(i);
arr[i].checked=obj.checked;
}
}
</script>
<body>
<input type="checkbox" onclick="sele(this)" />全选 this当前元素
<input type="checkbox" name="all" />1
<input type="checkbox" name="all" />2
<input type="checkbox" name="all" />3
<input type="checkbox" name="all" />4
< input type="checkbox" name="all" />5
</body>
//////////////////////////////////
dom(文档对象模型)
当浏览器接受到html代码的时候,浏览器会将所有的代码装载到内存中,形成一棵树(document树)
节点(Node) ?分为四种 层次结构 统称为 Node
文档节点 document ? 根节点 最顶部 整个html 是个文档节点
元素节点 element 标签
属性节点 attribute 元素里边有多个属性 href=
文本节点 text 标签体的内容 <a>点我</a
获取节点:
通过document可以获取其他节点:
常用方法:
document.getElementById("id值"):获取一个特定的元素
document.getElementsByTagName("标签名"):通过标签名获取一种元素(多个)
document.getElementsByClassName("class属性的值"):通过class属性获取一类元素(多个)
document.getElementsByName("name属性的值"):通过name属性获取一类元素(多个)
设置获取获取节点的value属性?先获取后再设置属性
元素.value;获取
元素.value="";设置
设置或者获取节点的标签体
元素.innerHTML;获取
元素.innerHTML="";设置
获取或者设置style属性
元素.style.属性;获取
元素.style.属性="";设置
获取或者设置属性
元素.属性
/////////////////////////
对于htmldom的操作若在js或者htmldom 查找不到 去查找xml dom ? xmldom 中有详细的介绍
关于文档的操作 在 xml dom 的document中 ?
关于元素的操作 在 xml dom 的element中?
appendChild(dom对象):在一个元素下添加孩子?
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 百万级群聊的设计实践
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升
· 《HelloGitHub》第 107 期