全选和反选

最新推荐文章于 2023-03-10 14:38:35 发布

chiguang1213

最新推荐文章于 2023-03-10 14:38:35 发布

阅读量118

点赞数

原文链接：https://my.oschina.net/u/3696728/blog/1591378

版权

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function(){
var btns = document.getElementsByTagName("button"); // 得到了所有的button
var inputs = document.getElementById("bottom").getElementsByTagName("input");
// bottom 里面的input
/* btns[0].onclick = function(){

for(var i=0; i<inputs.length;i++)
{
inputs[i].checked = true; // 选中表单
}
}

btns[1].onclick = function(){

for(var i=0;i<inputs.length;i++)
{
inputs[i].checked = false;
}
}

btns[2].onclick = function(){

for(var i=0;i<inputs.length;i++)
{
if(inputs[i].checked == true)
{
inputs[i].checked = false;
}
else
{
inputs[i].checked = true;
}
}
}*/

/*全选和取消函数*/
function all(flag){
for(var i=0;i<inputs.length;i++)
{
inputs[i].checked = flag;
}
}
btns[0].onclick = function(){
all(true);
};
btns[1].onclick = function(){
all(false);
};
btns[2].onclick = function(){

for(var i=0;i<inputs.length;i++)
{
inputs[i].checked == true ? inputs[i].checked = false : inputs[i].checked = true;
}
}
}
</script>
</head>
<body>
<div id="top">
<button>全选</button>
<button>取消</button>
<button>反选</button>
</div>
<div id="bottom">
<ul>
<li>选项: <input type="checkbox"/></li>
<li>选项: <input type="checkbox"/></li>
<li>选项: <input type="checkbox"/></li>
<li>选项: <input type="checkbox"/></li>
<li>选项: <input type="checkbox"/></li>
<li>选项: <input type="checkbox"/></li>
<li>选项: <input type="checkbox"/></li>
<li>选项: <input type="checkbox"/></li>
<li>选项: <input type="checkbox"/></li>
<li>选项: <input type="checkbox"/></li>
<li>选项: <input type="checkbox"/></li>
<li>选项: <input type="checkbox"/></li>
</ul>
</div>
</body>
</html>