DOM表单(复选框)
2024-08-26 11:23:24
在表单中,尤为重要的一个属性是name
<!--复选框的全选、全不选、反选-->
<!DOCTYPE>
<html>
<head lang="en">
<meta charset="utf-8"/>
<title>复选框的全选、全不选、反选</title>
</head>
<body>
<form id="form">
<input type="checkbox" name="check" value="北京" />北京
<input type="checkbox" name="check" value="上海" />上海
<input type="checkbox" name="check" value="广州" />广州 <br>
<input type="button" name="checkAll" value="全选"/>
<input type="button" name="checkNone" value="全不选"/>
<input type="button" name="checkOpp" value="反选"/>
</form>
<script>
var oForm=document.getElementById("form");
var Allbtn=oForm.checkAll;
var Nonebtn=oForm.checkNone;
var Oppbtn=oForm.checkOpp; Allbtn.onclick= function () {
for(var i=0;i<oForm.check.length;i++){
oForm.check[i].checked=true;
} } Nonebtn.onclick= function () {
for(var i=0;i<oForm.check.length;i++){
oForm.check[i].checked=false;
} } Oppbtn.onclick= function () {
for(var i=0;i<oForm.check.length;i++) {
if (oForm.check[i].checked){ //被选中
oForm.check[i].checked=false;
}
else{
oForm.check[i].checked=true;
}
}
}
</script>
</body>
</html>
最新文章
- 【BZOJ1662】[Usaco2006 Nov]Round Numbers 圆环数 数位DP
- height与line-height
- ClassLoader 详解及用途
- asp.net 框架接触(2)
- 自定义seekbar中,thumb被覆盖掉一部分问题
- APP安全测评checklist
- webp图片详解
- linux指令札记
- 【一天一道LeetCode】#136. Single Number
- shell-计算虚拟机创建时间
- MySQL索引失效的几种情况
- Docker容器硬盘动态扩容
- Linux - 磁盘操作
- 变量使用self.foo还是_foo
- Catalina.createDigester方法详细理解
- /etc/rc.local 与 /etc/profile
- MySQL 日常运维业务账号权限的控制
- Jsp 的映射
- 全国省会城市路网以及POI 数据
- java 调用第三方系统时的连接代码-记录