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

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

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

checkboxは、GUIのエレメントです。また、HTML<input>タグのtype属性で扱われる値を指します。

jQuery

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

Q&A

解決済

2回答

2975閲覧

jQueryでチェックボックスにより動作する仕組みを作っています。

take4

総合スコア39

checkbox

checkboxは、GUIのエレメントです。また、HTML<input>タグのtype属性で扱われる値を指します。

jQuery

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

0グッド

1クリップ

投稿2016/04/09 06:56

###前提・実現したいこと

jQueryでチェックボックスにより動作する仕組みを作っています。
「checkbox01」というIDを持った
チェックボックスと、「checkbox02」というIDを持ったチェックボックスをどちらもチェックした時に限り
「xxx」というclassを持った要素を非表示にするという仕組みにしたいと思っています。しかしその動作が実現しません。

###該当のソースコード
$('#checkbox01' + '#checkbox02').change(function(){
if($(this).attr('checked')) {
$('.xxx').css("display","none");
}
});

###試したこと

「'a'+'b'」のADN条件を与えたが動作が実現しません
Webで同条件の解決法を探したが見つけられませんでした

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

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

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

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

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

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

guest

回答2

0

$関数の引数にはCSSセレクタ風の文字列を指定するのですが、提示されたコードではJavaScriptレベルで文字列結合されているため、'#checkbox01' + '#checkbox02''#checkbox01#checkbox02'と同じ文字列としてjQueryに渡されます。
これは、「idがcheckbox01であり、かつ、idがcheckbox02である要素」という要素を取得する条件になってしまいます。しかし、そんな要素は存在しないため、このコードは動作しません。
複数の要素を取得したい場合は,で区切ります。例えば、以下のように記述することになります。

JavaScript

1var checkboxElems = $('#checkbox01, #checkbox02');

なお、,の後ろにスペースを含めていますが、これは見やすさのためであり、以下のように省略することが可能です。

JavaScript

1var checkboxElems = $('#checkbox01,#checkbox02');

参考:Multiple Selector (“selector1, selector2, selectorN”) | jQuery API Documentation

さて、これで動きそうではありますが、正しくは動きません。
何故なら、.change()の中のthisはクリックされた(厳密にはチェックされた/解除された)要素のみが渡され、他のチェックボックスは渡されないためです。
つまり、checkbox01のチェックボックスがチェックされたら、checkbox01のチェックボックスがthisに格納され、checkbox02は格納されません。
「全てチェック」されなくてはならないのに、チェックされたチェックボックスだけをチェックされたか判定してしまいます。

これを回避するためには、$('#checkbox01, #checkbox02')で取得した要素群が全てチェックされているか判定しなくてはなりません。
判定するやり方として複数の方法が考えられますが、ここでは全てのチェックボックスのうち「チェックされた」ものを取得し、その数がチェックボックス全ての数と一致するかどうか判定することにします。
チェックされたチェックボックスの数が、(チェックの有無を問わない)全てのチェックボックスの数と同じであれば、全てチェックされたと判定できます。

.filter()のセレクタに、「チェックされた」条件となるセレクタを指定し、「チェックされた」要素を全て取得します。

JavaScript

1var checkedCheckboxElems = checkboxElems.filter(':checked');

そして、数が一致するか判定します。
要素の数はlengthプロパティから取得できます。

JavaScript

1checkedCheckboxElems.length === checkboxElems.length

参考:.filter() | jQuery 1.9 日本語リファレンス | js STUDIO
参考:jQueryでチェックボックスのチェック状態を調べる方法 - 大人になったら肺呼吸
参考:jQueryのセレクタで指定したもの以外を選択する・させる方法 :not() | 9ineBB

この判定結果を、.toggle()に渡して表示/非表示を切り替え得られるようにします。
ただし、.toggle()は引数の値がtrueの場合に表示し、falseの場合に非表示にしてしまいます。
先ほどの判定では、全てチェックされた(非表示にしたい)場合にtrue、全てチェックされていない(表示したい)場合にfalseとなってしまうため、!演算子を使ってtruefalseを逆にする必要があります。

※ちなみにtrue/falseとは、JavaScriptのBooleanという値の事を意味しています。

JavaScript

1// クラスxxxの付いた要素群 2var xxxClassElems = $('.xxx'); 3 4// 表示/非表示を切り替え 5// 変数の値と表示の有無が逆なため、`!`演算子を使用 6xxxClassElems.toggle(!isAllChecked);

参考:【jQuery】要素の表示・非表示について (show, hide, toggle) - TASK NOTES
参考:論理演算子 - JavaScript | MDN

以上の点を考慮した、適切に動作するコードが以下になります。

JavaScript

1/* チェックボックスの要素群。複数の条件は、カンマ(,)で区切ります */ 2var checkboxElems = $('#checkbox01, #checkbox02'); 3/* クラスxxxの付いた要素群。予め取得し、変数に入れておくことで、パフォーマンスが向上します */ 4var xxxClassElems = $('.xxx'); 5 6checkboxElems.change(function() { 7 /* 8 * チェックボックスの要素群から、チェックされた要素を全て取得します 9 */ 10 var checkedCheckboxElems = checkboxElems.filter(':checked'); 11 /* 12 * チェックされたチェックボックスの数が、チェックボックスの数と一致するかどうか判定し、その結果を変数に格納します 13 * 数が一致 = 全てチェックされている 14 * 数が不一致 = どれかがチェックされていない 15 */ 16 var isAllChecked = checkedCheckboxElems.length === checkboxElems.length; 17 18 /* 19 * 全てチェックされていれば、クラスxxxの付いた要素を表示せず、 20 * 全てチェックされていなければ表示します。 21 */ 22 xxxClassElems.toggle(!isAllChecked); 23});

サンプル:http://output.jsbin.com/hebemun

投稿2016/04/09 08:09

編集2016/04/09 10:26
sounisi5011

総合スコア697

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

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

take4

2016/04/12 09:10

詳細にご解説いただき、ありがとうございます。大変助かりました。
guest

0

ベストアンサー

こんな感じにしてみました。
動作パフォーマンスとか汎用性とかはともかく、
一応お望みの挙動にはなるかと。

JavaScript

1$('input[type="checkbox"]').change(function(){ 2 hideContents(); 3}); 4 5function hideContents(){ 6 var check01 = $("#checkbox01").is(":checked"); 7 var check02 = $("#checkbox02").is(":checked"); 8 9 if(check01 && check02) { 10 $(".xxx").hide(); 11 } 12}

補足:
特定のcheckboxがチェックされているかどうかを
セレクタ.attr('checked')で取得しようとしていますが、これは上手く動作しないようです。
なので、こちらのサイトを参考にして
セレクタ.is(":checked")true or falseを取得しています。
後は#checkobx01#checkbox02のそれぞれがtrueかfalseかを変数に格納しておき、
&&条件で判定したのち、対象の要素を非表示にする命令を与えてみました。

他にも良い方法があるかもしれませんが、参考までに……

投稿2016/04/09 07:48

編集2016/04/09 07:57
aKusano

総合スコア3763

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問