浅谈jQuery中的checkbox问题

前端技术 2023/09/05 JavaScript

一开始的代码：

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

本文地址：https://www.stayed.cn/item/14093

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案