jQuery 的全选(全非选)即取得被选中的值使用介绍

更新时间：2013年11月12日 17:22:50 作者：

全选、全非选即取得被选中的值在日常开发应用中很广泛，下面有个不错的示例，大家可以感受下

页面代码

 
<body> 
<div> 
<input id="checkall" type="checkbox" value="天" />全部<br/> 
<div id="con"> 
<input type="checkbox" name="checkbox" value="天" />天 
<input type="checkbox" name="checkbox" value="空" />空 
<input type="checkbox" name="checkbox" value="飞" />飞 
<input type="checkbox" name="checkbox" value="来" />来 
<input type="checkbox" name="checkbox" value="五" />五 
<input type="checkbox" name="checkbox" value="个" />个 
<input type="checkbox" name="checkbox" value="字" />字 
<input type="checkbox" name="checkbox" value="这" />这 
<input type="checkbox" name="checkbox" value="都" />都 
<input type="checkbox" name="checkbox" value="不" />不 
<input type="checkbox" name="checkbox" value="算" />算 
<input type="checkbox" name="checkbox" value="事" />事</div> 
</div> 
<script src="Scripts/jquery-1.4.1.js" language="javascript"></script> 
<script src="JqueryAll.js" language="javascript"></script> 
</body> 

js中的代码

复制代码代码如下:

 
/*js部分 
* 绑定批量选定/非选 
* 例子 
*/ 

$(function () { 
$("#checkall").click(function () { 
var stu = $(this).attr("checked"); 
checkAll(stu); 
}) 
$("input[name='checkbox']").click(function () { 
uncheckAll(); 
}) 
}) 
function checkAll(status) { 
$("input[name='checkbox']").each(function () { 
$(this).attr("checked"); 
$(this).attr("checked", status); 
}) 
} 

function uncheckAll() { 
alert($("input[name='checkbox']:checked").length); 
if ($("input[name='checkbox']:checked").length == $("input[name='checkbox']").length) { 
$("#checkall").attr("checked",true); 
} 
else { 
$("#checkall").attr("checked", false); 
} 
} 

您可能感兴趣的文章:

移动端一个简单易懂的弹出框
本文给大家分享一段简单的jquery代码实现一个简单易懂的弹出框，非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧
2016-07-07
jQuery中:selected选择器用法实例
这篇文章主要介绍了jQuery中:selected选择器用法,实例分析了:selected选择器的功能、定义及匹配被选择的<option>元素的使用技巧,需要的朋友可以参考下
2015-01-01
jQuery Real Person验证码插件防止表单自动提交
这篇文章为大家介绍了一款jQuery验证码插件Real Person，可以防止自动提交表单
2015-11-11
JQuery样式与属性设置方法分析
这篇文章主要介绍了JQuery样式与属性设置方法,结合实例形式分析了jQuery属性的获取与设置、以及样式的添加与删除相关操作技巧,需要的朋友可以参考下
2019-12-12
到处都是jQuery选择器的年代不了解它们的性能，行吗
如今jQuery在网站上普及的程度越来越高，所以，对于jQuery的使用，即使再小的一点认识、一点优势、一点不足，也显得越来越值得研究和探讨
2012-06-06
jQuery表格行上移下移和置顶的实现方法
这篇文章主要介绍了jQuery表格行上移下移和置顶的实现方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2015-10-10
如何使用HTML5地理位置定位功能
用相对简单的JavaScript代码，可以创建出能确定用户地理位置详细信息的Web应用，包括经纬度以及海拔等。一些Web应用甚至能通过监控用户位置随时间的移动来提供导航功能，其中还综合了GoogleMaps API这样的地图系统。
2015-04-04
jQuery搜索同辈元素方法
这篇文章主要介绍了jQuery搜索同辈元素方法,实例分析了next、nextAll、nextUtil、prev、prevAll等方法的使用技巧,并给出了一个完整的实例进行了总结归纳,具有一定参考借鉴价值,需要的朋友可以参考下
2015-02-02
jQuery插件passwordStrength密码强度指标详解
这篇文章主要为大家详细介绍了jQuery插件passwordStrength密码强度指标实现代码，感兴趣的小伙伴们可以参考一下
2016-06-06
jQuery Mobile弹出窗、弹出层知识汇总
本文给大家介绍jquery mobile弹出窗、弹出层知识汇总，涉及到jquery mobile弹出相关知识，本文写的非常不错，具有参考借鉴价值，需要的朋友参考下吧
2016-01-01