ホーム » ブログ » jqueryで.attrと.propの違い
このエントリーをはてなブックマークに追加
@2013/07/11
jquery1.6.0には.attr()を廃棄し、.prop()を推奨となった。しかし、大混乱を招いたから、バージョン1.6.1から.attr()を復活させた。
ただ今の最新のバージョン2.xが.attrと.propを共存の状態です。共存といっても、今後推奨の.propを使ったほうが安心だね。

ここで、.attrと.propはどのぐらいの違いがあるかを実例で確認します。
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Jqueryでの.attr()と.propの違い</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.1.min.js"></script>
</head>     
<body> 
<div>
<input name="c1" type="checkbox" value="1" />
<label>
チェック1(no-checked)
</label>
<br><br><hr>

<input name="c2" type="checkbox" value="2" checked/>
<label>
チェック2(checked)
</label>
<br><br><hr>

<input name="c3" type="checkbox" value="3" checked="" />
<label>
チェック3(checked="")
</label>
<br><br><hr>

<input name="c4" type="checkbox" value="4" checked="checked" />
<label>
チェック4(checked="checked")
</label>
<br><br><hr>
</div>

</body>

<script type="text/javascript">
$( function() {
	$("label").bind("click", function(){
		var preObj = $(this).prev("input");
		alert("attr="+preObj.attr("checked"));
		alert("prop="+preObj.prop("checked"));
	});


});
</script>
</html>

チェック1~チェック4をクリックしたら、その行のcheckboxのチェック状態をアラートで出します。


結論は:

.attr("checked")はcheckboxの初期化ときの属性の値です。
※checkboxの初期値だけ。その後、選択/外すには関係がない。

.prop("checked")はcheckboxのパラメータの値です。
※checkboxの選択/外すによって、かわります。

【注意】
<input name="c1" type="checkbox" value="1" />
に対して、jquery1.6.1~1.8.xまで、.attr("checked")で取得した結果は、undifined。checkboxを選択状態にしてから、 .attr("checked")で取得した結果は checkedとなります。 しかし、jquery1.9.x以後は、選択状態にかかわらず、結果はずっとundifinedです。


♪ 当記事がお役に立ちましたらシェアして頂ければ嬉しいです。
0人
このエントリーをはてなブックマークに追加


◎zanmai.netサイト記事の転載・複製(コピー)は、zanmai.netへのリンクであることを明記してください!
◎本記事URL: http://www.zanmai.net/blog/data/143.html

お名前:

 

EMAIL:

 

URL:

 

認証コード:

zanmai.net-safecode

 


※会員の方は認証コードを要らないから、新規登録をオススメ!

アーカイブ @zanmai.net
check