jquery prop和attr方法学习笔记
文章参考
http://www.365mini.com/page/jquery-attr-vs-prop.htm
http://www.zhangyunling.com/?p=38
问题1：jquery如何判断type="checkbox"是否被选中
问题2：如何设置type="checkbox"是否选中
知识点一 ：属性值 VS 状态值
先看看下面的例子
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>attr demo</title>
<style>
p {
margin: 20px 0 0;
}
b {
color: blue;
}
</style>
<script src="http://www.zhangyunling.com/study/jquery/jquery.js"></script>
</head>
<body>
<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check me</label>
<p></p>
<script>
$( "input" )
.change(function() {
var $input = $( this );
$( "p" ).html( ".attr( 'checked' ): <b>" + $input.attr( "checked" ) + "</b><br>" +
".prop( 'checked' ): <b>" + $input.prop( "checked" ) + "</b><br>" +
".is( ':checked' ): <b>" + $input.is( ":checked" ) + "</b>" );
})
.change();
</script>
</body>
</html>结果如图：
关于checked的属性（明文显示在控件的属性），最重要的概念就是你要记住，它跟checked的状态值是毫无关系的，设置checked = "checked"或者checked = "true"等属性设置，和它的状态值true/false是无关的。而这里的属性值，事实上只是和defaultChecked的状态值有关，并且只能用来设置checkbox的初始的值。checked的属性值并不会随着checkbox的的状态变化而变化，可是checkbox的状态值却会。因此，为了能更好的跨浏览器的兼容，决定了checkbox的checked的状态要使用状态值进行处理。
attribute的checked、selected、disabled就是表示该属性初始状态的值
property的checked、selected、disabled才表示该属性实时状态的值(值为true或false)。
attr()与prop()函数的区别
简单理解：
对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
深入理解：
attr()函数主要依赖的是Element对象的getAttribute()和setAttribute()两个方法。
prop()函数主要依赖的则是JS中原生的对象属性获取和设置方式。
properties就是浏览器用来记录当前值的东西。正常情况下，properties反映它们相应的attributes(如果存在的话)。但这并不是boolean attriubutes的情况。当用户点击一个checkbox元素或选中一个select元素的一个option时，boolean properties保持最新。但相应的boolean attributes是不一样的，正如上面所述，它们仅被浏览器用来保存初始值。
此外，虽然prop()针对的是DOM元素的property，而不是元素节点的attribute。不过DOM元素某些属性的更改也会影响到元素节点上对应的属性。例如，property的id对应attribute的id，property的className对应attribute的class。
解答：
如何判断input="checkbox"控件是否被选中（下面三种方式，推荐第二种）
if ( elem.checked )
if ( $(elem).prop("checked") )
if ( $(elem).is(":checked") )设置type="checkbox"是否选中
<input id="check1" type="checkbox" checked="checked">
或者
<input id="check1" type="checkbox">
<script>
$( "input").prop("checked",true);
</script><input id="chk1" type="checkbox" />是否可见
<input id="chk2" type="checkbox" checked="checked" />是否可见
$("#chk1").prop("checked") == false
$("#chk2").prop("checked") == true
//如果上面使用attr方法，则会出现：
$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked"<body>
<input type="checkbox" id="checkbox1">
<input type="checkbox" id="checkbox2" checked>
<input type="radio" id="radio1" checked>
<input type="radio" id="radio2" >
<input type="text" readonly id="text1">
<input type="text" id="text2">
</body>
</html>
<script>
$(function(){
console.info($("#checkbox1").prop("checked"));
console.info($("#checkbox2").prop("checked"));
console.info($("#radio1").prop("checked"));
console.info($("#radio2").prop("checked"));
console.info($("#text1").prop("readonly"));
console.info($("#text2").prop("readonly"));
});
</script>