浅谈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 相关文章推荐
浅析JavaScript中的typeof运算符
Nov 30 Javascript
js常用数组操作方法简明总结
Jun 20 Javascript
浅谈JavaScript中的String对象常用方法
Feb 25 Javascript
js限制文本框只能输入整数或者带小数点的数字
Apr 27 Javascript
JS鼠标拖拽实例分析
Nov 23 Javascript
js 判断数据类型的几种方法
Jan 13 Javascript
关于不同页面之间实现参数传递的几种方式讨论
Feb 13 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
Mar 02 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
Aug 08 Javascript
vue+webpack实现异步组件加载的方法
Feb 03 Javascript
js正则匹配多个全部数据问题
Dec 20 Javascript
react中props 的使用及进行限制的方法
Apr 28 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
逐步提升php框架的性能
2008/01/10 PHP
php5.3 废弃函数小结
2010/05/16 PHP
如何利用http协议发布博客园博文评论
2015/08/03 PHP
PHPMAILER实现PHP发邮件功能
2018/04/18 PHP
详解Laravel5.6 Passport实现Api接口认证
2018/07/27 PHP
YII框架关联查询操作示例
2019/04/29 PHP
Yii框架操作cookie与session的方法实例详解
2019/09/04 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题分析
2007/08/12 Javascript
js去空格技巧分别去字符串前后、左右空格
2013/10/21 Javascript
js中把JSON字符串转换成JSON对象最好的方法
2014/03/21 Javascript
js实现点击向下展开的下拉菜单效果代码
2015/09/01 Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
2016/05/13 Javascript
AngularJs bootstrap搭载前台框架——基础页面
2016/09/01 Javascript
JavaScript获取select中text值的方法
2017/02/13 Javascript
详解JS中遍历语法的比较
2017/04/07 Javascript
js 数字、字符串、布尔值的转换方法(必看)
2017/04/07 Javascript
vue中用H5实现文件上传的方法实例代码
2017/05/27 Javascript
vue-resource + json-server模拟数据的方法
2017/11/02 Javascript
深入理解JavaScript 中的执行上下文和执行栈
2018/10/23 Javascript
优雅的在React项目中使用Redux的方法
2018/11/10 Javascript
vue路由跳转传参数的方法
2019/05/06 Javascript
Vue实现日历小插件
2019/06/26 Javascript
vue2和vue3的v-if与v-for优先级对比学习
2020/10/10 Javascript
解决vuex刷新数据消失问题
2020/11/12 Javascript
Python实现备份文件实例
2014/09/16 Python
Python多线程编程简单介绍
2015/04/13 Python
Django学习教程之静态文件的调用详解
2018/05/08 Python
python 通过可变参数计算n个数的乘积方法
2019/06/13 Python
selenium携带cookies模拟登陆CSDN的实现
2021/01/19 Python
Python3爬虫ChromeDriver的安装实例
2021/02/06 Python
整理HTML5移动端开发的常用触摸事件
2016/04/15 HTML / CSS
英国一家专门出售品牌鞋子的网站:Allsole
2016/08/07 全球购物
Myprotein加拿大官网:欧洲第一的运动营养品牌
2018/01/06 全球购物
计算机科学与技术专业求职信
2014/09/03 职场文书
市委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
党的群众路线教育实践活动个人对照检查材料(乡镇)
2014/11/05 职场文书