<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>
分享到：
相关推荐
用Axure RP 8.0做的原型设计列子，作用是复选框做全选和非全选，已选的做反选。可以学习下反选或非反选的交互思路。
jquery 、js实现复选框 (全选、反选)功能··
主要介绍了vue+vant-UI框架实现购物车的复选框全选和反选功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
复选框全选、全不选和反选的效果实现
spreadjs_列头添加复选框全选功能-demo
javascript 实现复选框全选/取消功能
实现table表格checkbox复选框的全选 反选.
复选框的全选和反选复选框的全选和反选复选框的全选和反选
复选框实现datagridview全选反选和全不选,datagridview换颜色（选中复选框之后）
主要介绍了微信小程序获取复选框全选反选选中的值，本文通过实例代码给大家简单介绍,需要的朋友可以参考下
QTableWidget表头添加复选框实现全选功能。有点投机取巧，但是功能是实现了。实现很简单。
pyqt5 QTableWidget/QTableView表头复选框源码
javaScript入门案例之复选框全选，全不选，反选
axure复选框全选反选效果.rp
实现全选全不选反选 并且,如果是在全选状态下将子复选框的选中取消, 那么全选复选框自动取消全选 如果全选复选框没有选中而子复选框全部被选中, 那么全选复选框自动选中全选
《锋利的jquery》利用jquery实现复选框的全选和反选
js控制页面的全选、反选 与获取选中的复选框值
一些VS2008快捷键,JS复选框全选，反选..
带复选框的多级目录树，复选框的选择控制子节点父节点 全选和反选 通过子节点控制父节点及以上父节点是否要选中
基于jQuery的三个JS复选框全选反选例子.zip