DDR爱好者之家

浅谈jQuery中的checkbox问题
站长资源 2024/11/28 佚名
77 1538
DDR爱好者之家 Design By 杰米

一开始的代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>复选框</title>
  <script src="/UploadFiles/2021-04-02/jquery.min.js">


当使用带有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="/UploadFiles/2021-04-02/jquery.min.js">


使用原声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问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？

根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米