一直想写这么个特效来着，一直没写，今天看到有人发了挺全效果也挺好，就果断的转了。
转载链接：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来操作checkbox，并实现全选、全不选、反选以及获取选中值这四个核心功能。 ### 一、jQuery选择器与checkbox操作 在jQuery中，我们可以使用不同的选择器来选取页面上的checkbox元素。...
5. **获取选中值**：最后，`$("#btn5").click`事件用于获取所有选中CheckBox的值。使用`$("[name='checkbox'][checked]")`选择所有已选中的CheckBox，然后遍历它们，将每个选中项的`value`属性值添加到字符串`str`中...