编程 Javascript

浅谈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问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

浅谈jQuery中的checkbox问题

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jquery利用event.which方法获取键盘输入值的代码

Oct 09 Javascript

jQuery获得IE版本不准确webbrowser的解决方法

Feb 23 Javascript

JavaScript 实现打印,打印预览,打印设置

Dec 30 Javascript

Javascript中获取对象的原型对象的方法小结

Feb 25 Javascript

深入理解setTimeout函数和setInterval函数

May 20 Javascript

AngularJS 单元测试（一）详解

Sep 21 Javascript

Bootstrap轮播图的使用和理解4

Dec 14 Javascript

微信小程序上滑加载下拉刷新（onscrollLower）分批加载数据（二）

May 11 Javascript

纯js实现动态时间显示

Sep 07 Javascript

jquery无缝图片轮播组件封装

Nov 25 jQuery

ES6基础之 Promise 对象用法实例详解

Aug 22 Javascript

使用JavaScript获取Django模板指定键值数据

May 27 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