一直想写这么个特效来着，一直没写，今天看到有人发了挺全效果也挺好，就果断的转了。
转载链接：http://www.iteye.com/topic/1138022
1、页面布局：
<body> <ul id="list"> <li><label><input type="checkbox" value="1" /> 1.老男孩</label></li> <li><label><input type="checkbox" value="2" /> 2.我最亲爱的</label></li> <li><label><input type="checkbox" value="3" /> 3.邂逅</label></li> <li><label><input type="checkbox" value="4" /> 4.心痛2013</label></li> <li><label><input type="checkbox" value="5" /> 5.要爱爱</label></li> <li><label><input type="checkbox" value="6" /> 6.怎么说我不爱你</label></li> </ul> <input type="checkbox" id="all" /> <input type="button" value="全选" class="btn" id="selectAll" /> <input type="button" value="全不选" class="btn" id="unSelect" /> <input type="button" value="反选" class="btn" id="reverse" /> <input type="button" value="获得选中值" class="btn" id="getValue" /> </body>
2、JS：
<script type="text/javascript">
$(function() {
//全选或全不选
$("#all").click(function() {
if (this.checked) {
$("#list :checkbox").attr("checked", true);
} else {
$("#list :checkbox").attr("checked", false);
}
});
//全选
$("#selectAll").click(function() {
$("#list :checkbox,#all").attr("checked", true);
});
//全不选
$("#unSelect").click(function() {
$("#list :checkbox,#all").attr("checked", false);
});
//反选
$("#reverse").click(function() {
$("#list :checkbox").each(function() {
$(this).attr("checked", !$(this).attr("checked"));
});
allCheck();
});
//设置全选复选框
$("#list :checkbox").click(function() {
allCheck();
});
//获取选中选项的值
$("#getValue").click(function() {
var valArr = new Array;
$("#list :checkbox[checked]").each(function(i) {
valArr[i] = $(this).val();
});
var vals = valArr.join(',');
alert(vals);
});
});
function allCheck() {
var num_all = $("#list :checkbox").size(); //选项总个数
var num_checked = $("#list :checkbox:checked").size(); //选中个数
if (num_all == num_checked) { //若选项总个数等于选中个数
$("#all").attr("checked", true); //全选选中
} else {
$("#all").attr("checked", false);
}
}
</script>
相关推荐
本文将深入探讨jQuery中关于“全选”、“反选”以及“获取选中值”的相关知识点，帮助你更好地理解和应用这些功能。 ### 一、jQuery全选 全选功能通常应用于多选列表或表格中，允许用户一次性选择所有选项。在...
"jquery全选反选全不选案例" 是一个常见的交互功能，常见于表格或者列表中，允许用户一键选择或取消所有选项。这个功能在数据筛选、批量操作等场景下非常实用。 实现这一功能的关键在于理解 jQuery 中的选择器和...
本篇文章将详细讲解如何利用jQuery实现全选、反选功能，并介绍如何获取选中项的值。这在构建网页表单或者需要用户多选操作的场景中非常常见。 首先，让我们理解全选和反选的基本概念。全选意味着选定所有可选项，而...
本话题将深入探讨“jQuery全选反选插件”的相关知识点，这对于构建具有复选框全选和反选功能的用户界面非常有用。 首先，jQuery全选反选插件的核心功能是实现复选框的批量选择。在网页上，当用户需要对一组选项进行...
对于“全选”、“全不选”和“反选”功能，jQuery 提供了简洁的解决方案，同时也可以方便地获取选中的元素值。以下我们将详细探讨如何使用 jQuery 实现这些功能。 1. **全选**： 全选功能通常应用于具有多选选项的...
JS实现全选反选全不选
"Jquery全选反选Checkbox"是一个常见的功能需求，特别是在需要用户批量选择或取消选择多个选项的场景下。这个功能通常应用于表格、列表或其他数据展示组件，让用户能够快速地对一组复选框进行全选或反选操作。 首先...
jQuery表格行全选反选单选代码，例子采用bootstrap格式，可以选择自定义。
本文将详细讲解如何使用jQuery来操作checkbox，并实现全选、全不选、反选以及获取选中值这四个核心功能。 ### 一、jQuery选择器与checkbox操作 在jQuery中，我们可以使用不同的选择器来选取页面上的checkbox元素。...
"jQuery全选反选及批量删除"是一个常见的交互功能，常用于表格或列表的管理，例如用户可以选择多个项目进行批量操作，如删除。这里我们将深入探讨如何实现这个功能。 首先，我们需要了解jQuery的选择器和事件绑定。...
而在这个特定的场景中，我们需要实现一个增强的功能：在`DataGridView`的列头添加一个`CheckBox`，通过这个`CheckBox`可以实现所有行中对应复选框的全选或反选操作。这个功能在数据管理界面中十分常见，例如在批量...
当我们需要在数据表中实现多选功能时，通常会在表头添加一个`Checkbox`，以实现全选或反选所有行的功能。这个过程涉及到事件处理、控件交互以及UI设计等多个方面的知识点。 首先，我们需要在`DataGridView`的表头行...
总之，"jquery全选反选"涉及的核心知识点包括：jQuery的选择器、属性操作、事件绑定以及可能的递归处理。实际应用中，开发者需要结合具体的HTML结构和需求，灵活运用这些知识来实现功能。如果需要深入学习，可以查阅...
在本教程中，我们将探讨如何利用C#实现复选框来控制DataGridView的数据全选、反选以及全不选，并在选中复选框后改变行的颜色。这将涉及到事件处理、数据绑定、自定义样式等多个方面。 首先，我们需要创建一个包含复...
反选操作与全选类似，但会改变所有复选框的选中状态。可以修改上面的代码实现反选： ```javascript $('#select-all').click(function() { $('input[type="checkbox"]').prop('checked', !this.checked); }); ...
可以使用`querySelector`或`querySelectorAll`获取选中项的数量，并与总行数比较，以此来决定全选按钮的`checked`属性。 8. **说明.htm**： 压缩包中的"说明.htm"文件可能是对代码的详细解释，包括如何使用代码、...
"Android CheckBox全选反选"这个话题主要涉及如何在ListView中实现CheckBox的选择与反选择操作，包括全选和反选的功能。ListView是Android系统提供的一种列表视图，它可以显示大量数据并允许用户进行交互。下面我们...
- 处理动态加载的子复选框：如果子复选框是动态生成的，可以使用`MutationObserver`来监听DOM的变化，确保新添加的复选框也能正确响应全选/反选。 - 多个全选/反选组：如果有多个全选/反选组，可以使用不同的类名或...
在网页开发中，全选和反选功能是常见的交互元素，尤其在表格或者多选项列表中，用户可能希望一键选择所有项目或清除已选。在这个案例中，我们将探讨如何使用HTML和jQuery来实现这一功能。 首先，我们需要创建HTML...