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 隔行换色函数代码
Oct 24 Javascript
jQuery :first选择器使用介绍
Aug 09 Javascript
javascript简单性能问题及学习笔记
Feb 04 Javascript
Javascript 实现图片无缝滚动
Dec 19 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
浅谈Webpack 是如何加载模块的
May 24 Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
Sep 30 Javascript
vue实现按需加载组件及异步组件功能
May 27 Javascript
微信小程序绘制图片发送朋友圈
Jul 25 Javascript
Vue+Vuex实现自动登录的知识点详解
Mar 04 Javascript
element中Steps步骤条和Tabs标签页关联的解决
Dec 08 Javascript
JavaScript 获取滚动条位置并将页面滑动到锚点
Feb 08 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
一个用mysql_odbc和php写的serach数据库程序
2006/10/09 PHP
discuz加密解密函数使用方法和中文注释
2014/01/21 PHP
workerman结合laravel开发在线聊天应用的示例代码
2018/10/30 PHP
JS阻止冒泡事件以及默认事件发生的简单方法
2014/01/17 Javascript
JS在IE下缺少标识符的错误
2014/07/23 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
2015/04/06 Javascript
nodejs调用cmd命令实现复制目录
2015/05/04 NodeJs
jQuery实现图片文字淡入淡出效果
2015/12/21 Javascript
数据结构中的各种排序方法小结(JS实现)
2016/07/23 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
2016/12/08 Javascript
Angular工具方法学习
2016/12/26 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
2017/02/23 Javascript
bootstrap+jquery项目引入文件报错的解决方法
2018/01/22 jQuery
详解Vue源码之数据的代理访问
2018/12/11 Javascript
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
2020/05/28 Javascript
安装ElasticSearch搜索工具并配置Python驱动的方法
2015/12/22 Python
详解Python爬虫的基本写法
2016/01/08 Python
python与sqlite3实现解密chrome cookie实例代码
2018/01/20 Python
Python 利用内置set函数对字符串和列表进行去重的方法
2018/06/29 Python
Python实现将Excel转换成xml的方法示例
2018/08/25 Python
python 数据提取及拆分的实现代码
2019/08/26 Python
Python替换NumPy数组中大于某个值的所有元素实例
2020/06/08 Python
Python 获取异常(Exception)信息的几种方法
2020/12/29 Python
python中常用的数据结构介绍
2021/01/12 Python
AmazeUI 点击元素显示全屏的实现
2020/08/25 HTML / CSS
LightInTheBox西班牙站点:全球商品在线采购
2016/09/22 全球购物
JD Sports法国:英国篮球和运动时尚的领导者
2017/09/28 全球购物
外企C语言笔试题
2013/11/10 面试题
美术专业个人自我评价
2014/01/18 职场文书
财务负责人任命书
2014/06/06 职场文书
2014年商场工作总结
2014/11/22 职场文书
企业党支部工作总结2015
2015/05/21 职场文书
亮剑观后感
2015/06/05 职场文书
护士业务学习心得体会
2016/01/25 职场文书
《和时间赛跑》读后感3篇
2019/12/16 职场文书
详解JavaScript中Arguments对象用途
2021/08/30 Javascript