新的一周又开始了，努力工作~~~
做HTML页面布局的时候，经常会需要实现“全选/反选”这样的功能，那么今天我们就来分享一个最简单的实现方式的代码。本例用jQuery的方法实现。
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content='text/html;charset=utf-8'/>
<script type='text/javascript' src='../js/jquery.js'></script>
<script>
$(function(){
$("#send").click(function(){
var str="你选中的是：\r\n";
$("[name=items]:checkbox:checked").each(function(){
str += $(this).val()+"\r\n";
})
alert(str);
})
$("#CheckAll").click(function(){
$("[name=items]:checkbox").attr("checked", this.checked);
})
$('[name=items]:checkbox').click(function(){
var flag= true;
$('[name=items]:checkbox').each(function(){
if(!this.checked){
flag = false;
}
})
$("#CheckAll").attr("checked", flag);
})
})
</script>
</head>
<body>
<form>
你爱好的运动是？
<input type='checkbox' id='CheckAll'/>全选/全不选<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='乒乓球'/>乒乓球
<input type='button' id='send' value='提交'/>
</form>
</body>
</html>该方法是通过点击选择框的方法，下面是通过点击按钮的方法。
把HTML部分换成
<form>
你爱好的运动是？<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='乒乓球'/>乒乓球
<input type='button' id='CheckAll' value='全 选'/>
<input type='button' id='CheckNo' value='全不选'/>
<input type='button' id='CheckRev' value='反 选'/>
<input type='button' id='send' value='提交'/>
</form>JS部分换成
$("#CheckAll").click(function(){
$("[name=items]:checkbox").attr("checked", true);
})
$("#CheckNo").click(function(){
$("[name=items]:checkbox").attr("checked", false);
})
$("#CheckRev").click(function(){
$("[name=items]:checkbox").each(function(){
//$(this).attr("checked", !$(this).attr("checked"));
this.checked = !this.checked;
})
})
$("#send").click(function(){
var str="你选中的是：\r\n";
$("[name=items]:checkbox:checked").each(function(){
str += $(this).val()+"\r\n";
})
alert(str);
})