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

JavaScript DOM编程学习笔记-全选（反选全不选）

2016-02-04 11:04 507 查看

[code=php;toolbar:false"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function(){

//全选选不选
document.getElementById("checkedAll_2").onclick = function(){
var flag = this.checked;
var items = document.getElementsByName("items");
for(var i = 0; i < items.length; i++){
items[i].checked = flag;
}
}

var items = document.getElementsByName("items");
for(var i = 0; i < items.length; i++){
items[i].onclick = function(){
//记录有多少item被选中了
var number = 0;
for(var j = 0; j < items.length; j++){
if(items[j].checked){
number++;
}
}
document.getElementById("checkedAll_2").checked = (number == items.length);
}
}

//全选
document.getElementById("CheckedAll").onclick = function(){
for(var i = 0; i < items.length; i++){
items[i].checked = true;
}
document.getElementById("checkedAll_2").checked = true;
}

//全不选
document.getElementById("CheckedNo").onclick = function(){
for(var i = 0; i < items.length; i++){
items[i].checked = false;
}
document.getElementById("checkedAll_2").checked = false;
}

//反选
document.getElementById("CheckedRev").onclick = function(){
for(var i = 0; i < items.length; i++){
items[i].checked = !(items[i].checked);
}
var tt = 0;
for(var i = 0; i < items.length; i++){
if(items[i].checked){//记录有多少选中了
tt++;
}
}
if(tt == 0){//全不选
document.getElementById("checkedAll_2").checked = false;
}else if(tt == items.length){//全选
document.getElementById("checkedAll_2").checked = true;
}

}

//提交
document.getElementById("send").onclick = function(){
for(var i = 0; i < items.length; i++){
if(items[i].checked){
alert(items[i].value);
}
}
}
}
</script>
</head>
<body>
<form method="post" action="">
你爱好的运动是？
<input type="checkbox" id="checkedAll_2" />全选/全不选
<br />
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球" />篮球
<input type="checkbox" name="items" value="羽毛球" />羽毛球
<input type="checkbox" name="items" value="乒乓球" />乒乓球
<br />
<input type="button" id="CheckedAll" value="全　选" />
<input type="button" id="CheckedNo" value="全不选" />
<input type="button" id="CheckedRev" value="反　选" />
<input type="button" id="send" value="提　交" />
</form>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航

JavaScript DOM编程 学习笔记-全选（反选 全不选）

JavaScript DOM编程学习笔记-全选（反选全不选）