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 相关文章推荐
json数据与字符串的相互转化示例
Sep 18 Javascript
Javascript实现可旋转的圆圈实例代码
Aug 04 Javascript
jQuery使用$.ajax进行即时验证实例详解
Dec 11 Javascript
jQuery实现图片局部放大镜效果
Mar 17 Javascript
图解prototype、proto和constructor的三角关系
Jul 31 Javascript
原生js实现焦点轮播图效果
Jan 12 Javascript
原生javascript实现分页效果
Apr 21 Javascript
开发Vue树形组件的示例代码
Dec 21 Javascript
浅谈Vue render函数在ElementUi中的应用
Sep 06 Javascript
JS 实现获取验证码 倒计时功能
Oct 29 Javascript
Echarts实现单条折线可拖拽效果
Dec 19 Javascript
关于vue属性使用和不使用冒号的区别说明
Oct 22 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
ThinkPHP 404页面的设置方法
2015/01/14 PHP
ThinkPHP的SAE开发相关注意事项详解
2016/10/09 PHP
prototype 1.5相关知识及他人笔记
2006/12/16 Javascript
破除网页鼠标右键被禁用的绝招大全
2006/12/27 Javascript
escape、encodeURI、encodeURIComponent等方法的区别比较
2006/12/27 Javascript
在IE中调用javascript打开Excel的代码(downmoon原作)
2007/04/02 Javascript
javascript json2 使用方法
2010/03/16 Javascript
jQuery 获取对象 基本选择与层级
2010/05/31 Javascript
JavaScript 变量作用域分析
2011/07/04 Javascript
21个JavaScript事件(Events)属性汇总
2014/12/02 Javascript
深入理解逻辑表达式的用法 与或非的用法
2016/06/06 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
2016/06/17 Javascript
JS 实现计算器详解及实例代码(一)
2017/01/08 Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
2017/08/18 Javascript
开发用到的js封装方法(20种)
2018/10/12 Javascript
vue 项目@change多个参数传值多个事件的操作
2021/01/29 Vue.js
[01:56]生活中的妖精之七夕特别档
2016/08/09 DOTA
Python学习资料
2007/02/08 Python
python通过pil将图片转换成黑白效果的方法
2015/03/16 Python
详解python中的生成器、迭代器、闭包、装饰器
2019/08/22 Python
浅谈Python_Openpyxl使用(最全总结)
2019/09/05 Python
python 字符串常用方法汇总详解
2019/09/16 Python
使用 Python 合并多个格式一致的 Excel 文件(推荐)
2019/12/09 Python
python如何使用代码运行助手
2020/07/03 Python
利用纯html5绘制出来的一款非常漂亮的时钟
2015/01/04 HTML / CSS
Agoda西班牙:全球特价酒店预订
2017/06/03 全球购物
美体小铺波兰官方网站:The Body Shop波兰
2019/09/03 全球购物
数据库面试要点基本概念
2013/10/31 面试题
品恩科技软件测试面试题
2014/10/26 面试题
政风行风评议工作总结
2014/10/21 职场文书
纪委立案决定书
2015/06/24 职场文书
毕业班工作总结
2015/08/10 职场文书
教师学习中国梦心得体会
2016/01/05 职场文书
基于CSS3画一个iPhone
2021/04/21 HTML / CSS
中国古风插画师排行榜:夏达第一,第三是阴阳师姑获鸟皮肤创作者
2022/03/18 国漫
Python使用pandas导入xlsx格式的excel文件内容操作代码
2022/12/24 Python