今天来做一些练习，做全选练习
原生版的实现：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style type="text/css"> </style>
</head>
<script type="text/javascript">
window.onload = function(){
var items = document.getElementsByName("items"); var checkedAllBox = document.getElementById("checkedAllBox");
//全选
var checkedAllBtn = document.getElementById("checkedAllBtn");
checkedAllBtn.onclick = function(){ for(var i = 0; i<items.length;i++){
items[i].checked = true;
}
//更新全选和全不选
checkedAllBox.checked = true;
}
//全不选
var checkedNoBtn = document.getElementById("checkedNoBtn");
checkedNoBtn.onclick = function(){
for(var i = 0; i<items.length;i++){
items[i].checked = false;
}
//更新全选和全不选
checkedAllBox.checked = false;
}
//反选
var checkedRevBtn = document.getElementById("checkedRevBtn");
checkedRevBtn.onclick = function(){ for(var i = 0; i<items.length;i++){
items[i].checked = !items[i].checked;
if (!items[i].checked) {
checkedAllBox.checked = false;
}
}
}
//提交
var sendBtn = document.getElementById("sendBtn");
sendBtn.onclick = function(){
for(var i = 0; i<items.length;i++){
if(items[i].checked){
alert(items[i].value)
}
}
}
//通过点击全选和全不选，items也选中
checkedAllBox.onclick = function(){
for(var i =0;i<items.length;i++){
items[i].checked = this.checked;
}
}
//通过点击items，如果有全选则全选、全不选也出现
for (var i = 0; i < items.length; i++) {
items[i].onclick = function(){
checkedAllBox.checked = true; for(var j =0;j<items.length;j++){
if(!items[j].checked){
checkedAllBox.checked = false;
break
}
}
}
}
}
</script> <body> <form method="post" action="">
你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选 <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="checkedAllBtn" value="全 选" />
<input type="button" id="checkedNoBtn" value="全不选" />
<input type="button" id="checkedRevBtn" value="反 选" />
<input type="button" id="sendBtn" value="提 交" />
</form>
</body> </html>
功能说明:
1. 点击'全选': 选中所有爱好
2. 点击'全不选': 所有爱好都不勾选
3. 点击'反选': 改变所有爱好的勾选状态
4. 点击'提交': 提示所有勾选的爱好
5. 点击'全选/全不选': 选中所有爱好, 或者全不选中
6. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
$(function(){
var $items = $(":checkbox[name='items']");
var $checkedAllBox = $("#checkedAllBox");
//1. 点击'全选': 选中所有爱好
$("#checkedAllBtn").click(function(){
//$items.each(function(){
//this.checked = true;
//})
////全选/全不选选项
//$checkedAllBox[0].checked = true;
$items.prop("checked",true);
$checkedAllBox.prop("checked",true);
});
//2. 点击'全不选': 所有爱好都不勾选
$("#checkedNoBtn").click(function(){
$items.prop("checked",false);
$checkedAllBox.prop("checked",false);
});
//3. 点击'反选': 改变所有爱好的勾选状态
$("#checkedRevBtn").click(function(){
$items.each(function(){
this.checked = !this.checked;
})
$checkedAllBox.prop("checked",$items.filter(":not(:checked)").length===0)
});
//4. 点击'提交': 提示所有勾选的爱好
$("#sendBtn").click(function(){
$items.filter(':checked').each(function () {
alert(this.value)
})
});
//5. 点击'全选/全不选': 选中所有爱好, 或者全不选中
$checkedAllBox.click(function(){
$items.prop("checked",this.checked);
});
//6. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
$items.click(function(){
$checkedAllBox.prop("checked",$items.filter(":not(:checked)").length===0)
})
})