js---复选框(全选,不选,反选)demo1--
2024-08-28 22:43:27
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<span style="font-size: 24px;">javascript 案例 全选 不选 反选</span><br />
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>全选 不选 反选</title>
</head>
<script>
window.onload=function (){ var oBtn1=document.getElementById("Btn1");
var oBtn2=document.getElementById("Btn2");
var oBtn3=document.getElementById("Btn3");
var oDiv=document.getElementById("Ben");
var oInp=oDiv.getElementsByTagName("input"); oBtn1.onclick=function(){ //全选
//oInp[0].checked=true; // checked : 布尔值 false true;
for(var i=0; i<oInp.length ; i++){
oInp[i].checked=true;
}
};
oBtn2.onclick=function(){ //不选
for(var i=0; i<oInp.length ; i++){
oInp[i].checked=false;
}
};
oBtn3.onclick=function(){ //反选
for(var i=0; i<oInp.length ; i++){
if(oInp[i].checked==true){ oInp[i].checked=false;
}
else{
oInp[i].checked=true;
}
}
};
}; </script>
<body>
<input id="Btn1" type="button" value="全选" /><br />
<input id="Btn2" type="button" value="不选" /><br />
<input id="Btn3" type="button" value="反选" /><br />
<div id="Ben">
<input type="checkbox" /><br />
<input type="checkbox" /><br /> <!--复选框 checked 选中-->
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
</div> </body>
</html>
最新文章
- highcharts总结
- 适配ios10(iTunes找不到构建版本)
- iOS autoresizing布局
- ASP.Net MVC跳转,分为form的submit提交跳转和ajax跳转
- SYN Flood应如何应对
- Android系统下,用adb实现自动获取应用性能数据
- java基础:熟悉3种内部类的写法,重点匿名内部类的使用
- 【BZOJ】1014: [JSOI2008]火星人prefix(splay+hash+二分+lcp)
- 连接sql server数据库的两种方式
- 解决:cc1.exe: sorry, unimplemented: 64-bit mode not compiled in
- HTTP编程(六)
- C# Thread多线程学习
- 【IOS】在SDK中打开其他接入应用的解决方案
- Windows|Windows Server 2003单网卡搭建VPN
- 关于让simulink中display组件显示二进制的方法
- Confluence 6 管理应用服务器内存设置
- 一起用ipython
- MapReduce与关系型数据库的不同之处。
- 在项目中使用react
- vijos 1512 SuperBrother打鼹鼠