Html之lable + checked时，动态添加属性时，input并没有被勾选，因为attr和prop的区别

<span><input type="checkbox" id="check4"><label for="check4"></label>公共目录</span>

$("#check4").attr("checked",true);

$("#check4").prop("checked",true);

未动态添加属性之前，长这样

当我用attr动态添加属性时，长这样

 虽然，从源码能看到确实属性赋值成功了，但是我的input框页面显示为并没有打钩（未选中状态）。

当我用prop动态添加属性时，长这样

虽然，从源码看不到 checked="checked"，但是我的input框页面已经显示为打钩（选中状态）。

你猜这是为啥呢？

attr和prop的使用场景：

1.添加属性名称该属性就会生效应该使用prop();

2.是有true,false两个属性使用prop();（如'checked','selected','disabled'等）

3.其他则使用attr();

官方推荐使用：

网友总结：

对于 HTML 元素本身就带有的固有属性，在处理时，使用 prop 方法。

对于 HTML 元素我们自己自定义的 DOM 属性，在处理时，使用 attr 方法。

出现问题都试试呗！！

 

 

番外篇

判断是否选中！.is(":checked") vs .prop("checked") == true

jquery判断checked的三种方法:

.attr(‘checked’):   //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false
.prop(‘checked’): //16+:true/false
.is(‘:checked’):    //所有版本:true/false//别忘记冒号哦

jquery赋值checked的几种写法:

所有的jquery版本都可以这样赋值:

// $(“#cb1”).attr(“checked”,”checked”);
// $(“#cb1”).attr(“checked”,true);

jquery1.6+:prop的4种赋值:

// $(“#cb1”).prop(“checked”,true);//很简单就不说了哦
// $(“#cb1”).prop({checked:true}); //map键值对
// $(“#cb1”).prop(“checked”,function(){
return true;//函数返回true或false
});

//$(“#cb1”).prop(“checked”,”checked”);

综上所述：在判断复选框、单选框等有checked属性的元素是否被选中时，兼容最好的是：

.is(‘:checked’)；  //所有版本:true/false     //别忘记冒号哦