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 相关文章推荐
使用TextRange获取输入框中光标的位
Oct 14 Javascript
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
Nov 09 Javascript
javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
Apr 12 Javascript
thinkphp中常用的系统常量和系统变量
Mar 05 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
May 04 Javascript
JavaScript DOM进阶方法
Apr 13 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
Dec 04 Javascript
基于jQuery实现二级下拉菜单效果
Feb 01 Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
May 03 Javascript
JS实现json的序列化和反序列化功能示例
Jun 13 Javascript
微信小程序分页加载的实例代码
Jul 11 Javascript
js实现简单的打印表格
Jan 15 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
php下实现农历日历的代码
2007/03/07 PHP
php字符比较函数similar_text、strnatcmp与strcasecmp用法分析
2014/11/18 PHP
Yii控制器中filter过滤器用法分析
2016/07/15 PHP
PHP中字符与字节的区别及字符串与字节转换示例
2016/10/15 PHP
CentOS7.0下安装PHP5.6.30服务的教程详解
2018/09/29 PHP
jQuery Ajax 全解析
2009/02/08 Javascript
json格式的时间显示为正常年月日的方法
2013/09/08 Javascript
利用cookie记住背景颜色示例代码
2013/11/04 Javascript
jQuery实现TAB选项卡切换特效简单演示
2016/03/04 Javascript
vue中如何创建多个ueditor实例教程
2017/11/14 Javascript
JS运动特效之完美运动框架实例分析
2018/01/24 Javascript
JS常用的几种数组遍历方式以及性能分析对比实例详解
2018/04/11 Javascript
react项目如何使用iconfont的方法步骤
2019/03/13 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
2019/07/25 jQuery
JavaScript 中的无穷数(Infinity)详解
2020/02/13 Javascript
轻量级的Web框架Flask 中模块化应用的实现
2017/09/11 Python
python实现决策树ID3算法的示例代码
2018/05/30 Python
Python实现的旋转数组功能算法示例
2019/02/23 Python
Python匿名函数及应用示例
2019/04/09 Python
在django view中给form传入参数的例子
2019/07/19 Python
python使用if语句实现一个猜拳游戏详解
2019/08/27 Python
Python Django框架防御CSRF攻击的方法分析
2019/10/18 Python
Python Django中间件,中间件函数,全局异常处理操作示例
2019/11/08 Python
python中从for循环延申到推导式的具体使用
2019/11/29 Python
Europcar葡萄牙:葡萄牙汽车和货车租赁
2017/10/13 全球购物
美国正宗奢华复古手袋、珠宝及配饰网站:What Goes Around Comes Around
2018/07/21 全球购物
澳大利亚领先的武术用品和健身器材供应商:SMAI
2019/03/24 全球购物
自主实习接收函
2014/01/13 职场文书
公务员职业生涯规划书范文  
2014/01/19 职场文书
副科级后备干部考察材料
2014/05/15 职场文书
感恩教育月活动总结
2014/07/07 职场文书
运动会致辞稿
2015/07/29 职场文书
2016年领导干部廉政承诺书
2016/03/24 职场文书
《天净沙·秋思》教学反思三篇
2019/11/02 职场文书
总结一些Java常用的加密算法
2021/06/11 Java/Android
Win11怎样将锁屏账户头像图片改成动画视频
2021/11/21 数码科技