jQuery实现checkbox全选功能完整实例
更新时间：2018年07月12日 11:52:42 作者：LutosX
这篇文章主要介绍了jQuery实现checkbox全选功能,结合完整实例形式分析了jQuery事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
本文实例讲述了jQuery实现checkbox全选功能。分享给大家供大家参考，具体如下：
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>www.jb51.net jQuery实现checkBox全选</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
/*
*统一设置所有条目的
*/
function setItemCheckBox(flag) {
$(":checkbox[name=checkboxBtn]").prop("checked",flag);
}
$(function () {
//点击全选
$("#selectAll").click(function(){
//1.获取全选的状态
var flag = this.checked;//获取全选的状态
if(flag){
$(this).prop("checked", true);
}else{
$(this).prop("checked", false);
}
//var flag = $(":checkbox[name=selectAll]").attr("checked");//jquery-1.5.1的用法
//2.让所有条目的复选框与全选的状态同步
//alert(flag);
setItemCheckBox(flag);
});
//给所有复选框添加事件
$(":checkbox[name=checkboxBtn]").click(function(){
var flagV = this.checked;
if(flagV){
$(this).prop("checked", true);
}else{
$(this).prop("checked", false);
}
//获取所有复选框的个数
var len = $(":checkbox[name=checkboxBtn]").length;
//获取所有被选中的复选框的个数
var checked_len = $(":checkbox[name=checkboxBtn]:checked").length;
if(len == checked_len){
//alert("全选中了");
$("#selectAll").prop("checked",true);
} else if(checked_len == 0) {
$("#selectAll").prop("checked",false);
} else {
$("#selectAll").prop("checked",false);
}
});
});
</script>
<body>
<div id="songList">
<input type="checkbox" value="歌曲1" name="checkboxBtn"/>歌曲1<br />
<input type="checkbox" value="歌曲2" name="checkboxBtn"/>歌曲2<br />
<input type="checkbox" value="歌曲3" name="checkboxBtn"/>歌曲3<br />
</div>
<input type="checkbox" id="selectAll" name="selectAllBtn"/>全选<br />
</body>
</html>
使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun运行测试效果如下：
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery表格(table)操作技巧汇总》、《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery form操作技巧汇总》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
您可能感兴趣的文章:
相关文章
本文给大家分享的是使用使用JQuery FancyBox插件实现图片展示的3种风格的特效，非常的简单实用，有需要的小伙伴可以查看下2015-11-11
这篇文章主要为大家详细介绍了jQuery异步上传一个或多个文件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
jquery性能优化做好，速度也很快，那么如何提高jquery性能呢，本篇文章给大家介绍jquery性能优化高级技巧，需要的朋友可以参考下2015-08-08
在IE7~IE8这种不支持HTML5的浏览器上，是利用Flash嵌入的方式实现的签名处理，在支持的HTML5的浏览器上默认采用canvas标签处理签名，可以生成 PNG格式、SVG格式的签名图片。非常适合在IPAD等移动客户端上实现手写签名的，该插件基于JQuery2015-05-05
这篇文章介绍了jQuery表单获取和失去焦点输入框提示效果的实例代码，有需要的朋友可以参考一下2013-08-08![jQuery中[attribute^=value]选择器用法实例](//img.jbzj.com/images/xgimg/bcimg5.png)
jQuery中[attribute^=value]选择器用法实例
这篇文章主要介绍了jQuery中[attribute^=value]选择器用法,实例分析了[attribute^=value]选择器的功能、定义及匹配以某些值开始的元素的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2014-12-12
本文给大家分享的是一则使用jQuery实现公告的翻滚效果的代码，十分简洁实用，兼容性也非常不错，这里推荐给小伙伴们2015-02-02
jquery DIV撑大怎么让滚动条滚到最底部，类似问题想必大家都有遇到过吧，下面与大家分享下具体的处理代码，感兴趣的朋友可以了解下哈2013-06-06
这篇文章主要介绍了jQuery实现响应鼠标滚动的动感菜单效果,可实现鼠标滑过菜单项呈现文字上下滑动变换的效果,涉及jQuery页面元素样式的动态设置技巧,需要的朋友可以参考下2015-09-09
下面就说下简单的返回顶部效果的代码实现，附注释说明，最简单的静态返回顶部，点击直接跳转页面顶部及用js模拟滚动效果上滑至顶部2013-04-04
![jQuery中[attribute^=value]选择器用法实例](http://img.jbzj.com/images/xgimg/bcimg5.png)
最新评论