<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做的原型设计列子，作用是复选框做全选和非全选，已选的做反选。可以学习下反选或非反选的交互思路。
《SpreadJS：实现列头复选框全选功能详解》 SpreadJS 是一款强大的JavaScript电子表格库，由 GrapeCity 公司开发，它允许开发者在Web应用中创建、编辑和展示电子表格数据。在实际应用中，我们经常需要在列头添加复...
本资源"复选框全选、全不选和反选的效果实现.rar"聚焦于JavaScript（JS）实现复选框的全选、全不选和反选功能，这对于创建交互性强、用户体验良好的网页表单至关重要。全选、全不选和反选功能使得用户可以便捷地管理...
axure复选框全选反选效果.rp
### Vue+Vant-UI框架实现购物车复选框全选和反选功能 #### 1. 概述 在电商类应用中，购物车模块是用户进行商品选购时的重要组成部分。其中，复选框全选和反选功能可以帮助用户快速选择或取消选择购物车中的全部商品...
以上就是实现`DataGridView`复选框全选功能的基本步骤。在实际应用中，你可能还需要考虑更多细节，比如如何同步模型数据、处理行插入和删除等。通过这个功能，用户可以更便捷地对大量数据进行批量操作，极大地提高了...
### JavaScript 实现复选框全选/取消功能 在网页开发中，经常需要用到复选框全选或取消的功能。本文将详细介绍如何通过JavaScript实现这一功能，并解析提供的代码片段。 #### 1. 功能概述 本功能的目标是实现一个...
在本教程中，我们将探讨如何利用C#实现复选框来控制DataGridView的数据全选、反选以及全不选，并在选中复选框后改变行的颜色。这将涉及到事件处理、数据绑定、自定义样式等多个方面。 首先，我们需要创建一个包含复...
在HTML的表格中实现复选框的全选与反选功能，能够大大提升用户体验，使用户可以便捷地选择一组数据。这里我们将详细探讨如何通过JavaScript和HTML来实现这一功能。 首先，我们需要创建一个包含复选框的HTML表格。...
"JQ 复选框全选反选"是jQuery应用中的一个常见功能，主要用于增强用户界面的交互性。在网页中，复选框常常用于让用户多选选项，而全选和反选功能则提供了方便快捷的选择所有或取消所有选项的方式。 首先，我们需要...
在本项目"JS控制复选框全选、反选,可进行同一页面多个复选框全选控制V2.0"中，我们将探讨如何利用JavaScript实现对复选框（checkbox）的全选、反选功能，并获取选中的复选框的值。这些功能在用户界面中常见于批量...
通过以上代码，我们就实现了`QTableWidget`的表头复选框全选功能。对于`QTableView`，可以使用`QStandardItemModel`和`QStandardItem`代替`QTableWidgetItem`，原理相同。 这个过程涉及到的知识点包括： - PyQt5的...
有时候，我们希望在表格的表头中添加复选框，以便实现全选或取消全选的功能，这在处理大量数据时尤其有用。本篇文章将详细解释如何在`QTableWidget`的表头中添加复选框并实现全选功能。 首先，我们需要了解`...
在IT领域，尤其是在前端开发中，复选框全选和反选是一个常见的功能需求，它通常出现在表格或者列表中，允许用户一次性选择或取消选择所有项目。这个"复选框全选和反选.zip"文件可能包含了一个JavaScript实现的解决...
在网页交互设计中，复选框...综上所述，通过JavaScript实现复选框全选全不选以及子复选框带动全选框的选中功能，主要涉及事件监听、DOM操作和状态同步。这种交互设计能提高用户操作的便捷性，提升网页应用的用户体验。
在微信小程序开发中，获取复选框全选与反选的选中值是一个常见需求。本文将详细讲解如何通过实例代码实现这一功能，并会详细说明相关知识点。 首先，我们需要了解微信小程序中几个关键组件的使用方法，包括`...
- 反选（全不选）所有复选框。 3. **技术选型**：使用纯JavaScript实现。 #### 二、代码分析 接下来，我们来详细解析给出的示例代码： ```html ;charset=utf-8"/> ޱĵ function selectAll(op){ var enjoy =...
"jquery全选反选全不选案例" 是一个常见的交互功能，常见于表格或者列表中，允许用户一键选择或取消所有选项。这个功能在数据筛选、批量操作等场景下非常实用。 实现这一功能的关键在于理解 jQuery 中的选择器和...
在IT领域，尤其是在前端开发中，构建用户界面时经常需要处理多级目录树结构，并且在这样的结构中加入复选框功能，以便用户可以进行批量选择或者全选、反选操作。这种技术常用于文件管理器、权限设置、菜单配置等场景...
总之，这个"基于jQuery的三个JS复选框全选反选例子"旨在帮助开发者理解和实现复选框全选反选的前端功能，这在网页表单、用户设置等场景中十分实用。通过学习和实践这些示例，开发者可以提升自己的jQuery技能，更好地...