全选练习-原生版和jQuery
今天来做一些练习，做全选练习
原生版的实现：
<!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)
})
})
