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 相关文章推荐
JavaScript 学习笔记(九)call和apply方法
Jan 11 Javascript
juqery 学习之三 选择器 层级 基本
Nov 25 Javascript
js面向对象编程之如何实现方法重载
Jul 02 Javascript
在javascript中创建对象的各种模式解析
May 16 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
Aug 24 Javascript
浅谈js script标签中的预解析
Dec 30 Javascript
js获取文件里面的所有文件名(实例)
Oct 17 Javascript
JS使用cookie保存用户登录信息操作示例
May 30 Javascript
关于layui导航栏不展示下拉列表的解决方法
Sep 25 Javascript
vue点击自增和求和的实例代码
Nov 06 Javascript
OpenLayers3实现地图显示功能
Sep 25 Javascript
addEventListener()和removeEventListener()追加事件和删除追加事件
Dec 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
php 验证码实例代码
2010/06/01 PHP
PHP二维数组的去重问题解析
2011/07/17 PHP
用PHP解决的一个栈的面试题
2014/07/02 PHP
PHP实现合并两个排序链表的方法
2018/01/19 PHP
Extjs列表详细信息窗口新建后自动加载解决方法
2010/04/02 Javascript
2014最热门的JavaScript代码高亮插件推荐
2014/11/25 Javascript
JavaScript获取文本框内选中文本的方法
2015/02/20 Javascript
如何判断Javascript对象是否存在的简单实例
2016/05/18 Javascript
第一次接触神奇的Bootstrap表单
2016/07/27 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
2017/05/02 Javascript
JS实现标签页切换效果
2017/05/04 Javascript
浅析Vue 和微信小程序的区别、比较
2018/08/03 Javascript
微信小程序实现预览图片功能
2020/10/22 Javascript
javascript获取select值的方法完整实例
2019/06/20 Javascript
[02:00]DAC2018主宣传片——龙征四海,剑问东方
2018/03/20 DOTA
python动态监控日志内容的示例
2014/02/16 Python
python益智游戏计算汉诺塔问题示例
2014/03/05 Python
简单介绍利用TK在Python下进行GUI编程的教程
2015/04/13 Python
Django卸载之后重新安装的方法
2017/03/15 Python
Python内置函数 next的具体使用方法
2017/11/24 Python
浅谈flask中的before_request与after_request
2018/01/20 Python
Python-ElasticSearch搜索查询的讲解
2019/02/25 Python
numpy中三维数组中加入元素后的位置详解
2019/11/28 Python
Django用户登录与注册系统的实现示例
2020/06/03 Python
Python不支持 i ++ 语法的原因解析
2020/07/22 Python
Python通过len函数返回对象长度
2020/10/22 Python
python uuid生成唯一id或str的最简单案例
2021/01/13 Python
HTML5 progress和meter控件_动力节点Java学院整理
2017/07/06 HTML / CSS
Prototype是怎么扩展DOM的
2014/10/01 面试题
《赠汪伦》教学反思
2014/04/12 职场文书
纪检干部个人对照检查材料
2014/09/23 职场文书
群众路线领导班子整改方案
2014/10/25 职场文书
北京故宫导游词
2015/01/31 职场文书
会计人员岗位职责
2015/02/03 职场文书
团员个人总结
2015/02/26 职场文书
预备党员考察表党小组意见
2015/06/01 职场文书