質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

8038閲覧

jQuery `Uncaught TypeError: Cannot read property 'addClass' of undefined` エラーが出る

hibikikudo

総合スコア238

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2017/03/31 04:16

編集2017/03/31 06:15

###前提・実現したいこと
「one」チェックボックスを一つでもチェックすると、「all」チェックボックスが外れ、「one」のチェックが全て外れると「all」がチェックされる。
上記にリストの表示切り替えが連動する。

追記

動くサンプル
https://jsfiddle.net/uetr0pfw/

###発生している問題・エラーメッセージ
期待する動きは実現できたが、下記のエラーが出てしまいます。

エラーメッセージ
Uncaught TypeError: Cannot read property 'addClass' of undefined

###該当のソースコード

html

1<input type="checkbox" class="all"><label>all</label> 2<input type="checkbox" class="one" data-target=".c1"><label>one 1</label> 3<input type="checkbox" class="one" data-target=".c2"><label>one 2</label> 4<ul id="list"> 5<li class="c1">target-one</li> 6<li class="c2">target-two</li> 7</ul>

javascript

1var checkOne = $('.one'); 2var checkAll = $('.all'); 3 4checkAll.on('click, change', function() { 5 if (checkAll.prop('checked')) { 6 $('li').addClass('is-selected'); 7 $('li').prop('data-target').addClass('is-selected'); 8 } 9 }); 10 11checkOne.on('click', function() { 12 if (checkOne.filter(':checked').length) { 13 checkAll.prop('checked', false).prop('disabled', false).change(); 14 } 15 else { 16 checkAll.prop('checked', true).prop('disabled', true).change(); 17 } 18 });

###補足情報(言語/FW/ツール等のバージョンなど)
jQuery v3.2.1

よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

セレクタが不正になっているようです。
下記でどうでしょうか?

$('li').prop('data-target').addClass('is-selected');

$($('li').data('target')).addClass('is-selected');

投稿2017/03/31 05:21

yohe32

総合スコア76

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hibikikudo

2017/03/31 06:06

ありがとうございます。単純な書き間違いで失礼いたしました。動くサンプルを作成しましたので、よろしければこちらをご覧になった上でアドバイスいただけないでしょうか。 https://jsfiddle.net/uetr0pfw/
kei344

2017/03/31 06:11

To: hibikikudoさん 質問文に実際のコードを追記されてはいかがでしょうか。(決して元のコードを消さないでください) また、回答者の指摘した内容と同じ間違いがリンク先のコードにありますので、それの問題では?
hibikikudo

2017/03/31 06:15

ありがとうございます。元の質問文にもサンプルを追記しました。
yohe32

2017/04/01 14:02

リンク先のコードを拝見すると、 同様の間違いになっています。 .data()に.addClassをつなげるのではなく、 .data()で取得した値をセレクターとして利用する必要があるので、 下記のようにする必要があります。 (段階的に、分解した処理にしています。) ーーー var selector = $('#faq-list').data('target'); $(selector).addClass('is-selected'); ーーー
guest

0

disabledの必要性がよくわかりませんが

javascript

1$(function(){ 2 $('.all').on('click, change', function() { 3 $('li').toggleClass('is-selected',$(this).prop('checked')); 4 }); 5 $('.one').on('click, change', function() { 6 $('li').filter($(this).data('target')).toggleClass('is-selected',$(this).prop('checked')); 7 $('.all').prop('checked',$('.one:checked').length==0); 8 }).trigger('change'); 9}); 10

sample

例示のhtmlから想像されるjavascriptを書いておきます

HTML

1<style> 2li.is-selected{color:lime;} 3</style> 4<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 5<script> 6$(function(){ 7 $('.js-check-all').on('click, change', function() { 8 $(this).prop('disabled',true); 9 $('.js-checkbox').prop('checked',false).trigger('change'); 10 }); 11 $('.js-checkbox').on('click, change', function() { 12 var flg=$(this).prop('checked'); 13 $('li').filter($(this).data('target')).toggleClass('is-selected',flg).prop('checked',flg); 14 var flg=$('.js-checkbox:checked').length==0; 15 $('.js-check-all').prop('checked',flg).prop('disabled',flg); 16 }).trigger('change'); 17}); 18</script> 19<ul> 20<li><input type="checkbox" name="faq-all" disabled="disabled" checked class="js-check-all" /><label for="checkboxAll" class="form--default__checkbox"><i></i>all</label></li> 21<li class="faq01"><input type="checkbox" name="faq-nutrition" id="checkbox01" class="js-checkbox" data-target=".faq01"/><label for="checkbox01" class="form--default__checkbox"><i></i>1</label></li> 22<li class="faq02"><input type="checkbox" name="faq-campaign" class="js-checkbox" id="checkbox02" data-target=".faq02"/><label for="checkbox02" class="form--default__checkbox"><i></i>2</label></li> 23</ul> 24

投稿2017/03/31 05:29

編集2017/03/31 06:37
yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hibikikudo

2017/03/31 06:05

ありがとうございます。上記試してみましたが、ダメでした。動くサンプルを作成しましたので、よろしければこちらをご覧になった上でアドバイスいただけますでしょうか。 https://jsfiddle.net/uetr0pfw/
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問