jQuery 复选框全选反选

 <script type="text/javascript">
$(
function(){
//全选
$("#CheckedAll").click(function(){
$(
'[name=items]:checkbox').attr("checked", this.checked );
});
$(
'[name=items]:checkbox').click(function(){
//定义一个临时变量,避免重复使用同一个选择器选择页面中的元素,提升程序效率。
var $tmp=$('[name=items]:checkbox');
//用filter方法筛选出选中的复选框。并直接给CheckedAll赋值。
$('#CheckedAll').attr('checked', $tmp.length==$tmp.filter(':checked').length);
});

//输出值
$("#send").click(function(){
var str="你选中的是:\r\n";
$(
'[name=items]:checkbox:checked').each(function(){
str
+=$(this).val()+"\r\n";
})
alert(str);
});
});
</script>
</head>

<body>
<form method="post" action="">
<b>你爱好的运动是?</b><br/>
<input type="checkbox" id="CheckedAll" />全选/全不选<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="send" value="提 交"/>
</form>

</body>

posted on 2011-09-15 18:51  Ruthless  阅读(5171)  评论(1编辑  收藏  举报