jqueryで.attrと.propの違い_技術三昧ブログ

ホーム » ブログ » 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>
チェック１(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人

★ 当記事を閲覧の方は下記の【関連記事】も閲覧していました。

閲覧履歴(直近10件)

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

閉じる

jqueryで.attrと.propの違い_ブログ_zanmai.net

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