<script type="text/javascript" src="../jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function(){
//全选
$("#checkedAll").click(function(){
$("[name=items]:checkbox").attr("checked",true);
})
//全不选
$("#checkedNo").click(function(){
$("[name=items]:checkbox").attr("checked",false);
})
//反选
$("#checkedRev").click(function(){
$("[name=items]:checkbox").each(function(){
//$(this).attr("checked",!$(this).attr("checked"));
this.checked=!this.checked;
});
})
//提交
$("#send").click(function(){
var str="你选中的是：\n";
$("[name=items]:checkbox:checked").each(function(){
str += $(this).val()+"\r\n";
});
alert(str);
});
// 用另一个复选框来控制全选/全不选
$("#check").click(function(){
//$("[name=items]:checkbox").attr("checked",this.checked);
if(this.checked){ //如果当前点击的多选框被选中
$('input[type=checkbox][name=items]').attr("checked", true );
}else{
$('input[type=checkbox][name=items]').attr("checked", false );
}
})
//复选框和复选框组联动（方法一）
$("[name=items]:checkbox").click(function(){
var flag=true;
$("[name=items]:checkbox").each(function(){
if(!this.checked){
flag=false;
}
})
$("#check").attr("checked",flag);
})
//复选框和复选框组联动（方法二）
$("[name=items]:checkbox").click(function(){
//定义一个临时变量，避免重复使用同一个选择器选择页面中的元素，提升程序效率。
var $tmp=$('[name=items]:checkbox');
//用filter方法筛选出选中的复选框。并直接给CheckedAll赋值。
$("check").attr("checked",$tmp.length==$tmp.filter(":checked").length);
})
})
</script>
</head>
<body>
<form>
你爱好的运动是？<input type="checkbox" id="check"/>全选/全不选
<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>
扫一扫
153
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
