您的位置：首页 > Web前端 > JavaScript

Javascript：全选和反选

2014-11-25 14:47 106 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Javascript数组</title>
<script type="text/javascript">
window.onload = function()
{
var select_all = document.getElementById("select_all");
var deselect = document.getElementById("reselect");
var items = document.getElementsByClassName("item");

//全选和取消全选操作
select_all.onclick = function()
{
if(select_all.checked==true)
{
for (var i = 0; i < items.length; i++) {
items[i].checked =true;
};
}else
{
for (var i = 0; i < items.length; i++) {
items[i].checked =false;
};
}
}

//反选操作
deselect.onclick = function()
{
for (var i = 0; i < items.length; i++) {
if(items[i].checked == true)
{
items[i].checked = false;
}
else
{
items[i].checked = true;
}
};
}

//监听全选对象，如果不是全部选中，则全选按钮不选中
var flag = true ;
for (var i = 0; i < items.length; i++) {
items[i].onclick = function()
{
for (var i = 0; i < items.length; i++) {
if(items[i].checked == false)
{
flag = false;
select_all.checked = false;
}
};
}
};
}
</script>
</head>
<body>
<input type="checkbox" id="select_all">全选
<input type="checkbox" id="reselect">反选
<br/><br/>
<input type="checkbox" class="item">序号1</input>
<input type="checkbox" class="item">序号2</input>
<input type="checkbox" class="item">序号3</input>
<input type="checkbox" class="item">序号4</input>
<input type="checkbox" class="item">序号5</input>
<input type="checkbox" class="item">序号6</input>
<input type="checkbox" class="item">序号7</input>
<input type="checkbox" class="item">序号8</input>
<input type="checkbox" class="item">序号9</input>
<input type="checkbox" class="item">序号10</input>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航