###前提・実現したいこと
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ページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答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
となってしまうため、!
演算子を使ってtrue
とfalse
を逆にする必要があります。
※ちなみに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});
投稿2016/04/09 08:09
編集2016/04/09 10:26総合スコア697
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総合スコア3763
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/04/12 09:10