浅谈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 相关文章推荐
JQuery 国际象棋棋盘 实现代码
Jun 26 Javascript
JQuery AJAX 中文乱码问题解决
Jun 05 Javascript
JavaScript包装对象使用介绍
Aug 29 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
Jan 27 Javascript
jQuery实现级联下拉框实战(5)
Feb 08 Javascript
无法获取隐藏元素宽度和高度的解决方案
Mar 07 Javascript
原生JavaScript实现todolist功能
Mar 02 Javascript
微信小程序实现收藏与取消收藏切换图片功能
Aug 03 Javascript
说说如何在Vue.js中实现数字输入组件的方法
Jan 08 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
May 03 Javascript
使用layer.msg 时间设置不起作用的解决方法
Sep 12 Javascript
微信小程序仿通讯录功能
Apr 09 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&amp;&amp;mysql)四
2006/10/09 PHP
CI框架的安全性分析
2016/05/18 PHP
php使用curl_init()和curl_multi_init()多线程的速度比较详解
2018/08/15 PHP
setTimeout 不断吐食CPU的问题分析
2009/04/01 Javascript
不同浏览器对回车提交表单的处理办法
2010/02/13 Javascript
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
2013/01/11 Javascript
JavaScript异步编程:异步数据收集的具体方法
2013/08/19 Javascript
javascript获取元素CSS样式代码示例
2013/11/28 Javascript
JS中自定义定时器让它在某一时刻执行
2014/09/02 Javascript
Javascript基础教程之变量
2015/01/18 Javascript
浅谈javascript获取元素transform参数
2015/07/24 Javascript
老生常谈js动态添加事件--- 事件委托
2016/07/19 Javascript
js仿腾讯QQ的web登陆界面
2016/08/19 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
2018/05/22 Javascript
javascript的delete运算符知识点总结
2019/11/19 Javascript
python实现文本文件合并
2015/12/29 Python
举例讲解Python的lambda语句声明匿名函数的用法
2016/07/01 Python
python通过cookie模拟已登录状态的初步研究
2016/11/09 Python
Python实现PyPDF2处理PDF文件的方法示例
2019/09/25 Python
使用PyQt5实现图片查看器的示例代码
2020/04/21 Python
使用Python合成图片的实现代码(图片添加个性化文本,图片上叠加其他图片)
2020/04/30 Python
Python3之乱码\xe6\x97\xa0\xe6\xb3\x95处理方式
2020/05/11 Python
编写python代码实现简单抽奖器
2020/10/20 Python
Lookfantastic挪威官网:英国知名美妆购物网站
2017/07/26 全球购物
Mountain Warehouse波兰官方网站:英国户外品牌
2019/08/29 全球购物
Columbia Sportswear法国官网:全球户外品牌
2020/09/25 全球购物
什么是makefile? 如何编写makefile?
2012/08/08 面试题
怎样有效的进行自我评价
2013/10/06 职场文书
单位刻章介绍信范文
2014/01/11 职场文书
志愿者活动总结范文
2014/04/26 职场文书
企业安全标语
2014/06/07 职场文书
2014年语文教研组工作总结
2014/12/06 职场文书
施工员岗位职责
2015/02/10 职场文书
学习党章心得体会2016
2016/01/15 职场文书
护士爱岗敬业心得体会
2016/01/25 职场文书
Python if else条件语句形式详解
2022/03/24 Python