jQueryのバージョンが新しくなると動きません。jsの書き方を教えていただけますでしょうか。

jQueryのバージョンが新しくなると動きません。
jsの書き方を教えていただけますでしょうか。

▼動く

▼動かない

<!DOCTYPE html>
<html lang="ja">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">
	$(function() {
		$("#check").click(function() {
			if( $(this).attr("checked") == true ) {
				$("#msg").css("display","block");
			} else {
				$("#msg").css("display","none");
			}
		});
	});
</script>

</head>
<body>
	<form>
         	<div>
                <input type="checkbox" name="check" id="check" value="1" />
                <label for="check">check2</label>
            </div>
			<div id="msg" style="display:none;">
            	check2押したらmsg出てくる
            </div>
	</form>
</body>
</html>

行動規範の内容に同意します

回答3件

ベストアンサー

javascript
1if( $(this).attr("checked") == true ) {

↓

javascript
1if( $(this).prop("checked") == true ) {

投稿2016/09/28 05:35

退会済みユーザー

総合スコア0

fnwakc

2016/09/28 05:43

すごいはやい的確ありがとうございました。

行動規範の内容に同意します

解決していますが、補足として参考にしていただければ･･･。

HTML
1<input type="checkbox"><input type="checkbox" checked>

JavaScript
1$('input').click(function() {
2	console.log($(this).attr('checked')); // 状態が変わっても値が変わらない
3	console.log($(this).prop('checked'));
4});
5```**動くサンプル：**[https://jsfiddle.net/61p6w090/](https://jsfiddle.net/61p6w090/)
6
7---
8
9【attr()とprop()とchecked属性とcheckedプロパティと... - Tomcky's blog】
10[http://tomcky.hatenadiary.jp/entry/2015/01/28/attr()とprop()とchecked属性とcheckedプロパティと___](https://goo.gl/Ei9UMf) ※ URL中の「()」でリンクを上手く張れないため短縮URLを使用しています
11
12
13【jqueryのattrとprop（とdataとvalとhtmlとかつまり属性とかの取得）の使い分け一覧 - Qiita】
14[http://qiita.com/smzk/items/8adac00010e48cc7bd84](http://qiita.com/smzk/items/8adac00010e48cc7bd84)

投稿2016/09/28 06:14

kei344

総合スコア69407

以下のようにしてどうですか？

if ($(this).attr("checked") == "checked") {

投稿2016/09/28 05:50

退会済みユーザー

総合スコア0

fnwakc

2016/09/28 05:56

ありがとうございます！

think49

2016/09/28 07:13

$(this).attr("checked") === undefined になりますので、このコードは期待通りに動作しないと思われます。 kei344 さんが同様の指摘をされています。

退会済みユーザー

2016/09/28 07:55

「期待通りに動作しない」とはどのように確認しましたか？実際に検証して見ましたけど、上のコードの通りで動きましたが？　試したブラウザは IE9, Firefox 49.0.1 , Chrome 49.0.2623.112 m, Opera 12.28, Safari 5.1.7 です。チェックが入っている時は、$(this).attr("checked") は checked、入ってない時は undefined という結果になるはずです。

kei344

2016/09/28 08:01 編集

https://jsfiddle.net/61p6w090/1/ 多分1.6.1から1.8あたりはその挙動をしますが、1.9からはしないと思います。質問者は1.7.2なので動きますが、1.9以降にも対応できるコードのほうが同じくライブラリを切り替えたときの問題が減るとは思います。

think49

2016/09/28 08:07 編集

To: SurferOnWww さん jQuery 3.1.1 + Google Chrome 53.0.2785.116 m でチェックの有無に関係なく、display: none; のまま変化しないことを確認しました。 https://jsfiddle.net/4nd3nfsm/ To: kei344 さん > 質問者は1.7.2なので動きますが、補足ありがとうございます。質問者さんのバージョンまでは気に留めてなかったので見落としていました…。

退会済みユーザー

2016/09/28 08:07

自分が検証したコードは質問者さんのコードの true を "checked" に変えたものです。なので 1.7.2 です。

think49

2016/09/28 08:10

To: SurferOnWww さん失礼しました。ver.1.7.2 を念頭に置いていませんでした。 kei344 さんが仰るように前方互換性の面で prop() を使うか、this.checked を使うのが好ましいとは思います。

退会済みユーザー

2016/09/28 08:20

自分も勉強になりました。ありがとうございました。

行動規範の内容に同意します

あなたの回答