jQuery实现CheckBox全选、全不选功能


Posted in Javascript onJanuary 11, 2017

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>jQuery实现CheckBox全选、全不选</title> 
<script src="http://code.jquery.com/jquery-2.2.3.min.js" type="text/javascript"></script>   
<script type="text/javascript"> 
    $(function() { 
    $(':checkbox').click(function(evt){ 
      // 阻止冒泡 
      evt.stopPropagation(); 
    }); 
      //判断是否全选 
      $("#checkAll").click(function() { 
        $('input[name="subBox"]').prop("checked",this.checked);  
      }); 
      var $subBox = $("input[name='subBox']"); 
      $subBox.click(function(){ 
        //alert($subBox.length); 
        //alert($("input['subBox']:checked").length); 
        $("#checkAll").prop("checked",$subBox.length == $("input[name='subBox']:checked").length ? true : false); 
      }); 
      //用于检查是否选中,选中的话提示值 
      $("#butt").click(function (){ 
        //$('input[name="subBox"]').prop("checked",this.checked);  
        var arrChk=$("input[name='subBox']:checked"); 
        $(arrChk).each(function(){  //each() 遍历函数 
          alert(this.value);             
        });  
        if(arrChk.length==0){ 
          alert("没有选中") 
        } 
      }); 
    }); 
  </script> 
</head> 
<body> 
  <div> 
    <input id="checkAll" type="checkbox" />全选 
    <input name="subBox" type="checkbox" value="1" />选项1 
    <input name="subBox" type="checkbox" value="2"/>选项2 
    <input name="subBox" type="checkbox" value="3"/>选项3 
    <input name="subBox" type="checkbox" value="4"/>选项4 
    <input type="button" id="butt" value="检查是否选中"/> 
  </div> 
</body> 
</html>

jQuery版本问题

原本操作属性用的是 $("XXX").attr("attrName");

而jQuery的版本用的是2.1.1,这就是存在一个兼容性和稳定性问题。

jQuery API明确说明,1.6+的jQuery要用prop,尤其是checkBox的checked的属性的判断,

即 使用代码如下:

$("input[name='checkbox']").prop("checked"); 
$("input[name='checkbox']").prop("disabled", false); 
$("input[name='checkbox']").prop("checked", true);

于是乎将attr改为prop,问题得解。

相关阅读:

以上所述是小编给大家介绍的jQuery实现CheckBox全选、全不选功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
推荐40个非常优秀的jQuery插件和教程【系列三】
Nov 09 Javascript
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
Jan 20 Javascript
利用JavaScript检测CPU使用率自己写的
Mar 22 Javascript
深入分析原生JavaScript事件
Dec 29 Javascript
javascript继承的六大模式小结
Apr 13 Javascript
学习JavaScript设计模式(封装)
Nov 26 Javascript
js获取当前时间(昨天、今天、明天)
Nov 23 Javascript
微信小程序实现图片上传放大预览删除代码
Jun 28 Javascript
vue-cli V3.0版本的使用详解
Oct 24 Javascript
js实现自动播放匀速轮播图
Feb 06 Javascript
JavaScript字符和ASCII实现互相转换
Jun 03 Javascript
实现一个Vue自定义指令懒加载的方法示例
Jun 04 Javascript
理解javascript中的闭包
Jan 11 #Javascript
javascript常用经典算法详解
Jan 11 #Javascript
总结几道关于Node.js的面试问题
Jan 11 #Javascript
微信端开发--登录小程序步骤
Jan 11 #Javascript
Vue数据驱动模拟实现1
Jan 11 #Javascript
利用iscroll4实现轮播图效果实例代码
Jan 11 #Javascript
详解js前端代码异常监控
Jan 11 #Javascript
You might like
WINXP下apache+php4+mysql
2006/11/25 PHP
学习ExtJS Column布局
2009/10/08 Javascript
javascript学习笔记(七) js函数介绍
2012/06/19 Javascript
Javascript操作URL函数修改版
2013/11/07 Javascript
javascript计算用户打开网页的停留时间
2014/01/09 Javascript
javascript运动详解
2015/07/06 Javascript
javascript判断复选框是否选中的方法
2015/10/16 Javascript
jQuery树形插件jquery.simpleTree.js用法分析
2016/09/05 Javascript
微信小程序 网络API 上传、下载详解
2016/11/09 Javascript
学习vue.js条件渲染
2016/12/03 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
2016/12/12 Javascript
layer弹出层框架alert与msg详解
2017/03/14 Javascript
JavaScript字符串检索字符的方法
2017/06/23 Javascript
js登录滑动验证的实现(不滑动无法登陆)
2018/01/03 Javascript
vue与bootstrap实现简单用户信息添加删除功能
2019/02/15 Javascript
Vue CL3 配置路径别名详解
2019/05/30 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
2019/10/28 jQuery
超简单的微信小程序轮播图
2019/11/22 Javascript
如何HttpServletRequest文件对象并储存
2020/08/14 Javascript
[01:06:07]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS CIS
2014/05/22 DOTA
Java分治归并排序算法实例详解
2017/12/12 Python
python中pika模块问题的深入探究
2018/10/13 Python
神经网络相关之基础概念的讲解
2018/12/29 Python
Python最小二乘法矩阵
2019/01/02 Python
Python面向对象程序设计中类的定义、实例化、封装及私有变量/方法详解
2019/02/28 Python
解决Python命令行下退格,删除,方向键乱码(亲测有效)
2020/01/16 Python
python等差数列求和公式前 100 项的和实例
2020/02/25 Python
python求numpy中array按列非零元素的平均值案例
2020/06/08 Python
python 合并多个excel中同名的sheet
2021/01/22 Python
html5应用缓存_动力节点Java学院整理
2017/07/13 HTML / CSS
2013年员工自我评价范文
2013/12/27 职场文书
综艺节目策划方案
2014/06/13 职场文书
教师作风建设剖析材料
2014/10/11 职场文书
商超业务员岗位职责
2015/02/13 职场文书
小学教师师德师风承诺书
2015/04/28 职场文书
导游词之千岛湖
2019/09/23 职场文书