浅谈jQuery中的checkbox问题

站长资源 2024/11/30 佚名

2 0 1

一开始的代码：

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

jquery,checkbox

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“浅谈jQuery中的checkbox问题”

暂无评论...

www.wwsws.com 伏龙阁资源网

39,976影音资源

44,792技术资源

21,817软件资源

651,128站长资源

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

2024年11月30日

浅谈jQuery中的checkbox问题

浅谈JS运算符&&和|| 及其优先级

jQuery实现将div中滚动条滚动到指定位置的方法

评论“浅谈jQuery中的checkbox问题”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

浅谈jQuery中的checkbox问题

浅谈JS运算符&&和|| 及其优先级

jQuery实现将div中滚动条滚动到指定位置的方法

评论“浅谈jQuery中的checkbox问题”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存