prop&attr区别和用法,以多选框为例

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>