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 相关文章推荐
jQuery Ajax之load()方法
Oct 12 Javascript
Jquey拖拽控件Draggable使用方法(asp.net环境)
Sep 28 Javascript
JavaScript实现QueryString获取GET参数的方法
Jul 02 Javascript
js中创建对象的几种方式示例介绍
Jan 26 Javascript
JavaScript实现的一个计算数字步数的算法分享
Dec 06 Javascript
jQuery中before()方法用法实例
Dec 25 Javascript
jQuery中判断对象是否存在的方法汇总
Feb 24 Javascript
jQuery图片左右滚动代码 有左右按钮实例
Jun 20 Javascript
轻松掌握JavaScript享元模式
Aug 27 Javascript
js实现手机发送验证码功能
Mar 13 Javascript
Bootstrap fileinput文件上传预览插件使用详解
May 16 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
Mar 27 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
收听短波不可能有声音清晰的品质吗
2021/03/01 无线电
php图片缩放实现方法
2014/02/20 PHP
php根据年月获取当月天数及日期数组的方法
2016/11/30 PHP
php根据用户名和手机号查询是否存在手机号码
2017/02/16 PHP
利用laravel搭建一个迷你博客实战教程
2017/08/13 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
使用composer安装使用thinkphp6.0框架问题【视频教程】
2019/10/01 PHP
JQuery 入门实例1
2009/06/25 Javascript
JavaScript 事件记录使用说明
2009/10/20 Javascript
IE与firefox下Dhtml的一些区别小结
2009/12/02 Javascript
JavaScript中实现sprintf、printf函数
2015/01/27 Javascript
分享12个实用的jQuery代码片段
2016/03/09 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
2016/05/15 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
2016/06/16 Javascript
jQuery查找节点方法完整实例
2016/09/13 Javascript
对vue.js中this.$emit的深入理解
2018/02/23 Javascript
vue elementUI tree树形控件获取父节点ID的实例
2018/09/12 Javascript
layui实现数据表格自定义数据项
2019/10/26 Javascript
基于javascript实现碰撞检测
2020/03/12 Javascript
详解Python设计模式编程中观察者模式与策略模式的运用
2016/03/02 Python
python求质数的3种方法
2018/09/28 Python
python3 http提交json参数并获取返回值的方法
2018/12/19 Python
python3实现的zip格式压缩文件夹操作示例
2019/08/17 Python
解决windows上安装tensorflow时报错,“DLL load failed: 找不到指定的模块”的问题
2020/05/20 Python
Python编写单元测试代码实例
2020/09/10 Python
想学画画?python满足你!
2020/12/24 Python
详解Python+Selenium+ChromeDriver的配置和问题解决
2021/01/19 Python
英国家用电器折扣网站:Electrical Discount UK
2018/09/17 全球购物
中国汽车租赁行业头部企业:一嗨租车
2019/05/16 全球购物
瑞士图书网站:Weltbild.ch
2019/09/17 全球购物
C/C++有关内存的思考题
2015/12/04 面试题
超市优秀员工事迹材料
2014/05/01 职场文书
2014年幼儿园教学工作总结
2014/12/04 职场文书
Python 中 Shutil 模块详情
2021/11/11 Python
海贼王十大潜力果实,路飞仅排第十,第一可毁世界(震震果实)
2022/03/18 日漫
vue 把二维或多维数组转一维数组
2022/04/24 Vue.js