浅谈jQuery中的checkbox问题


Posted in Javascript onAugust 10, 2016

一开始的代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>复选框</title>
  <script src="https://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
  <script type="text/javascript">
  $(function() {
    $("#all").click(function () {
      if (this.checked) {
        $("#list :checkbox").each(function () {
          $(this).attr("checked", true);  //选择器要有空格隔开
        })
      } else {
        $("#list :checkbox").each(function () {
          $(this).attr("checked", false);
        })
      }

    });
  })
</script>
</head>
<body>
<ul id="list">
  <li><label><input type="checkbox" value="1">广东省 </label></li>
  <li><label><input type="checkbox" value="2">广西省 </label></li>
  <li><label><input type="checkbox" value="3">河南省 </label></li>
  <li><label><input type="checkbox" value="4">福建省 </label></li>
  <li><label><input type="checkbox" value="5">湖南省 </label></li>
  <li><label><input type="checkbox" value="6">江西省 </label></li>
</ul>
<input type="checkbox" id="all">
<input type="button" value="全选" class="btn" id="selectAll">
<input type="button" value="全不选" class="btn" id="unSelect">
<input type="button" value="反选" class="btn" id="reverse">
<input type="button" value="获得选中的所有值" class="btn" id="getValue">
</body>
</html>

当使用带有jQuery的方法attr()时,会有相应的问题存在,比如当你在点击id=all的复选框前去点击id=list下的复选框,这时当你再次点击id=all的复选框时就会出现之前点击的复选框没有变化,但是查看元素时发现该复选框的checked值会发生相应的变化。我查了一下资料,问题出在如下:

原来是jQuery版本问题。因为这里用的是attr(),而jQuery的版本用的是3.1.0的,这就存在一个兼容性问题。

$("XXX").attr("attrName");而jQuery的版本用的是2.1.1,这就是存在一个兼容性和稳定性问题。

jQuery API明确说明,1.6+的jQuery要用prop,尤其是checkBox的checked的属性的判断,

即使用代码如下:

$(function() {
    $("#all").click(function () {
      if (this.checked) {
        $("#list :checkbox").each(function () {
          $(this).prop("checked", true);  //选择器要有空格隔开
        })
      } else {
        $("#list :checkbox").each(function () {
          $(this).prop("checked", false);
        })
      }

    });

给出使用jQuery事先的全选和全不选:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>复选框</title>
  <script src="https://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
  <script type="text/javascript">
  $(function() {
    $("#all").click(function () {
      if (this.checked) {
        $("#list :checkbox").each(function () {
          $(this).prop("checked", true);  //选择器要有空格隔开
        })
      } else {
        $("#list :checkbox").each(function () {
          $(this).prop("checked", false);
        })
      }
    });
    //第二种
//    $("#all").click(function(){
//      if(this.checked){
//        $("#list :checkbox").prop("checked", true);
//      }else{
//        $("#list :checkbox").prop("checked", false);
//      }
//    });

    //全选
    $("#selectAll").click(function () {
      $("#list :checkbox,#all").prop("checked", true);
    });

    //全不选
    $("#unSelect").click(function () {
      $("#list :checkbox,#all").prop("checked", false);
    });

    //反选
    $("#reverse").click(function () {
      $("#list :checkbox").each(function () {
//        $(this).prop("checked", !$(this).prop("checked"));
        this.checked=!this.checked;
      });

      if($('#list :checkbox:checked').length==$("#list :checkbox").length){
        $("#all").prop("checked",true);
      }
      else{
        $("#all").prop("checked",false);
      }
    });

    //获取选中的值
    $("#getValue").click(function(){
      var valArr = new Array();
      $("#list :checkbox:checked").each(function(i){   //判断被选中的
        valArr[i] = $(this).val();
      })
      var vals = valArr.join(',');//转换为逗号隔开的字符串
      alert(vals);
    });
  })
  </script>
</head>
<body>
<ul id="list">
  <li><label><input type="checkbox" value="1.广东省">广东省 </label></li>
  <li><label><input type="checkbox" value="2.广西省">广西省 </label></li>
  <li><label><input type="checkbox" value="3.河南省">河南省 </label></li>
  <li><label><input type="checkbox" value="4.福建省">福建省 </label></li>
  <li><label><input type="checkbox" value="5.湖南省">湖南省 </label></li>
  <li><label><input type="checkbox" value="6.江西省">江西省 </label></li>
</ul>
<input type="checkbox" id="all">
<input type="button" value="全选" class="btn" id="selectAll">
<input type="button" value="全不选" class="btn" id="unSelect">
<input type="button" value="反选" class="btn" id="reverse">
<input type="button" value="获得选中的所有值" class="btn" id="getValue">
</body>
</html>

使用原声JS实现全选和全不选

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
<script type="text/javascript">
  function checkAll(name) {
    var el = document.getElementsByTagName('input');
    var len = el.length;
    for(var i=0; i<len; i++) {
      if((el[i].type=="checkbox") && (el[i].name==name)) {
        el[i].checked = true;
      }
    }
  }
  function clearAll(name) {
    var el = document.getElementsByTagName('input');
    var len = el.length;
    for(var i=0; i<len; i++) {
      if((el[i].type=="checkbox") && (el[i].name==name)) {
        el[i].checked = false;
      }
    }
  }
</script>
<input type="checkbox" name="test" value="" onclick="if(this.checked==true) { checkAll('test'); } else { clearAll('test'); }" /> 字母全选开关
<input type="checkbox" name="test" value="a" /> a
<input type="checkbox" name="test" value="b" /> b
<input type="checkbox" name="test" value="c" /> c
<input type="checkbox" name="test" value="d" /> d
<input type="checkbox" name="test" value="e" /> e
<input type="checkbox" name="test" value="f" /> f
<input type="checkbox" name="test" value="g" /> g
<br>
<input type="checkbox" name="num" value="" onclick="if(this.checked==true) { checkAll('num'); } else { clearAll('num'); }" /> 数字全选开关 <input type="checkbox" name="num" value="1" /> 1
<input type="checkbox" name="num" value="2" /> 2
<input type="checkbox" name="num" value="3" /> 3
<br><br>
<input type="button" value="选择所有的字母" onclick="checkAll('test')" /> <input type="button" value="清空选中的字母" onclick="clearAll('test')" /> <br><br>
<input type="button" value="选择所有的数字" onclick="checkAll('num')" /> <input type="button" value="清空选中的数字" onclick="clearAll('num')" />
</body>
</html>

最后插入attr()与prop()的区别:

jquery1.6中新加了一个方法prop(),官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值。

大家都知道有的浏览器只要写disabled,checked就可以了,而有的要写成disabled = "disabled",checked="checked",比如用attr("checked")获取checkbox的checked属性时选中的时候可以取到值,值为"checked"但没选中获取值就是undefined。

jq提供新的方法“prop”来获取这些属性,就是来解决这个问题的,以前我们使用attr获取checked属性时返回"checked"和"",现在使用prop方法获取属性则统一返回true和false。

那么,什么时候使用attr(),什么时候使用prop()?

1.添加属性名称该属性就会生效应该使用prop();

2.是有true,false两个属性使用prop();

3.其他则使用attr();

项目中jquery升级的时候大家要注意这点!

以下是官方建议attr(),prop()的使用:

Attribute/Property .attr() .prop()
accesskey
align
async
autofocus
checked
class
contenteditable
draggable
href
id
label
location ( i.e. window.location )
multiple
readOnly
rel
selected
src
tabindex
title
type
width ( if needed over .width())

以上这篇浅谈jQuery中的checkbox问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
document.getElementById介绍
Sep 13 Javascript
jquery键盘事件使用介绍
Nov 01 Javascript
jquery获取复选框被选中的值
Apr 10 Javascript
JavaScript静态类型检查工具FLOW简介
Jan 06 Javascript
轻量级的原生js日历插件calendar.js使用指南
Apr 28 Javascript
JS实现支持多选的遍历下拉列表代码
Aug 20 Javascript
JS定义类的六种方式详解
May 12 Javascript
Vue中保存用户登录状态实例代码
Jun 07 Javascript
详解Vue 多级组件透传新方法provide/inject
May 09 Javascript
angularJs中$http获取后台数据的实例讲解
Aug 08 Javascript
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 Vue.js
Ajax常用封装库——Axios的使用
May 08 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
Aug 10 #Javascript
Three.js学习之网格
Aug 10 #Javascript
js 将图片连接转换成base64格式的简单实例
Aug 10 #Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
Aug 10 #Javascript
最棒的Angular2表格控件
Aug 10 #Javascript
浅谈js中的三种继承方式及其优缺点
Aug 10 #Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
Aug 10 #Javascript
You might like
mysql_num_rows VS COUNT 效率问题分析
2011/04/23 PHP
CI框架整合widget(页面格局)的方法
2016/05/17 PHP
php+js实现百度地图多点标注的方法
2016/11/30 PHP
PHP基于新浪IP库获取IP详细地址的方法
2017/05/04 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
jQuery学习7 操作JavaScript对象和集合的函数
2010/02/07 Javascript
jquery实现右键菜单插件
2015/03/29 Javascript
复杂的javascript窗口分帧解析
2016/02/19 Javascript
jquery实现百叶窗效果
2017/01/12 Javascript
BootStrap Datetimepicker 汉化的实现代码
2017/02/10 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
2017/04/28 jQuery
基于JavaScript实现幸运抽奖页面
2020/07/05 Javascript
seajs下require书写约定实例分析
2018/05/16 Javascript
用图片替换checkbox原始样式并实现同样的功能
2018/11/15 Javascript
微信小程序实现判断是分享到群还是个人功能示例
2019/05/03 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
2020/02/10 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
2020/10/20 Javascript
layui使用及简单的三级联动实现教程
2020/12/01 Javascript
[01:19:34]2014 DOTA2国际邀请赛中国区预选赛 New Element VS Dream time
2014/05/22 DOTA
Python之ReportLab绘制条形码和二维码的实例
2018/01/15 Python
python实现NB-IoT模块远程控制
2018/06/20 Python
[原创]Python入门教程2. 字符串基本操作【运算、格式化输出、常用函数】
2018/10/29 Python
python+Django+pycharm+mysql 搭建首个web项目详解
2019/11/29 Python
python 解决flask uwsgi 获取不到全局变量的问题
2019/12/22 Python
PyQt5.6+pycharm配置以及pyinstaller生成exe(小白教程)
2020/06/02 Python
python对 MySQL 数据库进行增删改查的脚本
2020/10/22 Python
python爬虫scrapy基本使用超详细教程
2021/02/20 Python
python推导式的使用方法实例
2021/02/28 Python
俄罗斯在线服装店:STOLNIK
2021/03/07 全球购物
Linux Interview Questions For software testers
2013/05/17 面试题
毕业生求职找工作的自我评价范文
2013/11/27 职场文书
出国签证在职证明
2014/09/20 职场文书
给老师的感谢信
2015/01/20 职场文书
安全生产先进个人总结
2015/02/15 职场文书
汤姆索亚历险记读书笔记
2015/06/29 职场文书
如何开发一个渐进式Web应用程序PWA
2021/05/10 Javascript