博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
prop&attr区别和用法,以多选框为例
阅读量:4309 次
发布时间:2019-06-06

本文共 1311 字,大约阅读时间需要 4 分钟。

1.比较

  相同点 : prop和attr作为jquery的方法都可以获取属性值;

  不同点 : (1) 对于HTML元素本身就带有的固有属性,使用prop方法,

                          attr获取checkbox的checked属性时选中的时候可以取到值,值为"checked"但没选中获取值就是undefined。

                          jq提供新的方法“prop”来获取这些属性,以前我们使用attr获取checked属性时返回"checked"和"",现在使用prop方法获取属性则统一返回true和false

                      (2)对于HTML元素我们自己自定义的DOM属性,使用attr方法 // 对于自定义的属性用prop方法取值和设置属性值时,都会返回undefined值

 

2.栗子

(1)

<script type="text/javascript" >

$(function(){
       var flag=false;
  $("#btn").click(function(){
  if(flag==false){
    $("#check").attr("checked",true);
    flag=true;
  }else{
    $("#check").removeAttr("checked");
    flag=false;
  }
  });

});

</script>

<input type="checkbox"   id="check" checked>

</br>
<input type="button" id="btn" value="btn btn">

//在第一次生效,勾选和取消之后就失效了,标签中一直显示checked="checked"

改用prop就可以了

if(flag==false){

    $("#check").prop("checked",true);
    flag=true;
  }else{
    $("#check").prop("checked",false);
    flag=false;
  }

(2) 使用原生js控制多选框的勾选状态

<script>

function checkAll() {
  var all=document.getElementById('all');//获取到点击全选的那个复选框的id
  var one=document.getElementsByName('checkname[]');//获取到复选框的名称
  if(all.checked==true){//因为获得的是数组,所以要循环 为每一个checked赋值
    for(var i=0;i<one.length;i++){
    one[i].checked=true;
    }
  }else{
    for(var j=0;j<one.length;j++){
    one[j].checked=false;
    }
  }
}
</script>

转载于:https://www.cnblogs.com/lizhiwei8/p/7682542.html

你可能感兴趣的文章
期货市场技术分析05_交易量和持仓兴趣
查看>>
TB交易开拓者入门教程
查看>>
TB创建公式应用dll失败 请检查用户权限,终极解决方案
查看>>
python绘制k线图(蜡烛图)报错 No module named 'matplotlib.finance
查看>>
talib均线大全
查看>>
期货市场技术分析06_长期图表和商品指数
查看>>
期货市场技术分析07_摆动指数和相反意见理论
查看>>
满屏的指标?删了吧,手把手教你裸 K 交易!
查看>>
不吹不黑 | 聊聊为什么要用99%精度的数据回测
查看>>
高频交易的几种策略
查看>>
量化策略回测TRIXKDJ
查看>>
量化策略回测唐安奇通道
查看>>
CTA策略如何过滤部分震荡行情?
查看>>
量化策略回测DualThrust
查看>>
量化策略回测BoolC
查看>>
量化策略回测DCCV2
查看>>
mongodb查询优化
查看>>
五步git操作搞定Github中fork的项目与原作者同步
查看>>
git 删除远程分支
查看>>
删远端分支报错remote refs do not exist或git: refusing to delete the current branch解决方法
查看>>