複雑なチェックボックスの条件分岐

Question

###目的
チェックボックスの切替をしたいのですが、複数の条件がぶつかってしまい、どうしてもうまくいきません。

次のHTMLで、「チェックが入った色を持つ果物を表示したい。」というのが目的です。

<ul class="colorlist">
	<li>
    <input id="red" class="check" name="chk_color" value="red" type="checkbox">
    <label for="red" class="check_label">red</label>
  </li>
	<li>
    <input id="green" class="check" name="chk_color" value="green" type="checkbox">
    <label for="green" class="check_label">green</label>
  </li>
	<li>
    <input id="yellow" class="check" name="chk_color" value="yellow" type="checkbox">
    <label for="yellow" class="check_label">yellow</label>
  </li>
</ul>

<div class="fluits">
  <p class="ringo">リンゴ(red)(green)(yellow)</p>
  <p class="mikan">ミカン(red)(yellow)</p>
  <p class="budo">ブドウ(green)</p>
</div>

###やってみたこと
次のように書くと近いです。が、

greenのチェックを消すと、リンゴが消えてしまいます。

リンゴはgreenを持っていますが、redとyellowのチェックも外さない限り消えないでほしいのです。

「チェックが入った色を持つ果物を表示したい。」というのが目的なのです。

▼動くサンプル
http://jsfiddle.net/j0yus6mp/6/

▼そのコード

////////////////////
////チェックで表示切替
(function($){

  //redにチェックがあるときは、「りんご」「みかん」を表示したい
  $('#red').change(function(){
		if ($(this).is(':checked')) {
		$(".ringo, .mikan").css('color', '#000');
		} else {
		$(".ringo, .mikan").css('color', '#ddd');    
    }
  });
  
  //greenにチェックがあるときは、「リンゴ」「ブドウ」を表示したい
  $('#green').change(function(){    
		if ($(this).is(':checked')) {
		$(".ringo, .budo").css('color', '#000');
		} else {
		$(".ringo, .budo").css('color', '#ddd');      
    }
  });
   
  //yellowにチェックがあるときは、「リンゴ」「ミカン」を表示したい
  $('#yellow').change(function(){       
		if ($(this).is(':checked')) {
		$(".ringo, .mikan").css('color', '#000');
		} else {
		$(".ringo, .mikan").css('color', '#ddd');      
    }
  });
  
})(jQuery);


////////////////////
////読み込み時は全てチェックして表示
(function($){
  $(document).ready(function(){
	  $('#red, #yellow, #green').prop("checked", true);
	  $('.apple, .orange, .grape').css('display', 'block');  
  });
})(jQuery);

今日ずっと取り組んでこれなので、お手数おかけして申し訳ございませんが、質問させてください。m(_ _)m

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

Comments

[kszk311]

色の変更は、jQueryの.css()でやりたいのでしょうか？クラスのon-offでいけませんか？

[m.ts10806]

もうちょっと簡潔に組めそうですね。かなり固定で書かれているので項目が増えたときに対応が難しくなりそうです。

[退会済みユーザー]

mts10806さん、どうもありがとうございました！項目増えたときのアレンジも最高です。助かりました。

[退会済みユーザー]

kszk311さん、こんにちは。ひとまず解決いたしました。アドバイスありがとうございます。今回はjqueryでやってみたいなと思っておりましたが、クラスのon-offというと、CSSでの方法か何かがあるのでしょうか？

Answer 1

div>div{display: none;}
.a>.a,.b>.b,.c>.c{display: block;}

<div onchange='let t = arguments[0].target; list.classList[t.checked ? "add" : "remove"](t.value)'>
	<input type="checkbox" value="a"/>
	<input type="checkbox" value="b"/>
	<input type="checkbox" value="c"/>
</div>
<div id="list">
	<div class="a b c">abc</div>
	<div class="a b">ab</div>
	<div class="a">a</div>
</div>

Comments

[退会済みユーザー]

defghi1977さん、ありがとうございます。
onchangeとは！まったく知らないものが出てきてびっくりです。
少し思っていたのとは違いましたけれど、勉強になりました。m(_ _)m

Answer 2

もっと簡潔にかけるかもしれませんが。

<div class="fluits">
  <p class="red green yellow">リンゴ(red)(green)(yellow)</p>
  <p class="red yellow">ミカン(red)(yellow)</p>
  <p class="green">ブドウ(green)</p>
</div>

それぞれにクラスを振っておき、そのクラスを含むかどうかで判断します。
これなら項目が増えてもclass振るだけなのでjavascript側は変えずにhtmlの方だけ増やせばOKとなるはず。

(function($){
  //対象のフルーツ一覧取得
  var fluits_list = $(".fluits p");

  //チェックボックスのチェック状態により作動
  $('.check').change(function(){
   //チェックされているボックスの情報を全て取る
   var color = $('.check:checked').map(function() {
    return $(this).val();
   });

  //半角スペースで結合
    if(color.length == 0){
        fluits_list.css('color', '#ddd');
    }else{
        //フルーツ一覧をループ
        for(i=0;i<fluits_list.length;i++){
            hasCount = 0;
            for(colori=0;colori<color.length;colori++){
              if($(fluits_list[i]).hasClass(color[colori])){
                hasCount++;
              }
            }
            if(hasCount==color.length){ //チェックされたもの全て持っていれば黒に
            //if(hasCount>0){ //チェックされたもの1つでも持っていれば黒に
                $(fluits_list[i]).css('color', '#000');
            }else{
            	  $(fluits_list[i]).css('color', '#ddd');
            }
        }
    }
  });

})(jQuery);

• hasClass()

Comments

[退会済みユーザー]

mts10806さん、お世話になっております。

今回は（も?）質問が少し不明瞭でしたが、私の目的にピッタリあっているご回答を頂戴したのでベストアンサーにさせて頂きました。
誠にありがとうございます。

p.s.
昨日は大変失礼いたしました。あの返信は口調が軽かったのだと深く反省しております。センスがズレているのでよく口が災いとなり誤解を招くことが多く、ましてネットでのやりとりともなれば特に注意すべきだと思いました。
また、それにも関わらず、ご回答いただき、本当に、、ありがとうございます。おどろきましたが、とてもうれしいです。

[m.ts10806]

コメント通知で気づきましたが、あの時の方でしたか。
ですが、本件とは関係ないので、その追伸は特に気にしなくてよいですし、少し厳しいですが、不要に思います。
私は基本「今、目の前にある問題・課題の解決の糸口の提案」を最優先としているためあまり質問者さん自身のことを深く調べたりしません。
（別の方の質問の別の質問に書きましたが、いつも全く見ないわけではありません）

質問内容だけ見て、おそらく私が思っているのより簡潔に書ける回答が確実につきそうだけど、
ひとまず質問内容で書いてある内容からあまり離れないやり方で回答してみました。

[退会済みユーザー]

ストーリーの前にタスク優先とは、プログラマーらしいクールさですね。私はよく余計なストーリーや人格をにおわせる口調をはさんでコミュニケーションを楽しもうと試みるのです。けれど、それは相手によっては「たちの悪い遊び」にすぎないのですね。本当に気を付けます。いくつものご指摘、誠にありがとうございます。

[m.ts10806]

なるほど。
基本文字でのみのやりとりなので、余計なことは言わず淡々とやりとりすればいいと思いますよ。あまり成熟していない状態で無理に丁寧にしようとしても、それはお互いにとってちょうどよいものではなく慇懃無礼にあたることがあります。
1文目とか、本当に不要ですね＾＾

[退会済みユーザー]

申し訳ございません。ご回答、微妙に違っていたようです。

http://jsfiddle.net/j0yus6mp/29/

greenのチェックをはずすと、ミカンしか表示されず、リンゴが表示されないようです。（redとyellowをもつリンゴも表示させたいと思っているのですが…）

[退会済みユーザー]

>1文目とか、本当に不要ですね＾＾

そこもすごく尊敬を込めたつもりでした…。本当に気を付けます。

[m.ts10806]

確かにミスってますね。すみません。
方向性は間違ってないはずなんですが
hasClassのところもう少し丁寧に書けばよかったです。
調整してみます。

[m.ts10806]

BAでたあとに確認とソースコードいじるのは少し気が引けますが、
1点確認です。

条件としてはANDでしょうかORでしょうか。
例えばgreenとredがチェックされてた場合は、「どちらか含んでいれば表示対象」なのか「両方含んでいたら表示対象」なのか。
具体的にはgreenとredがチェックされてた場合、リンゴのみなのか、リンゴ・ミカン・ブドウ　なのか。

[m.ts10806]

まあ、分岐が1か所変わるだけなので、どちらか選んでください。

[m.ts10806]

＞どちらか選んでください
片方コメントアウトしておいたので、
自身の仕様と合う方を有効にしてもう片方は消して利用してください。
結構冗長なのでたぶんもっと簡単に書けます。

[退会済みユーザー]

ありがとうございます。見事できました。分岐は今回はAND予定でしたけれど、さすがのお気遣い、痛み入ります。別のケースにも使えそうです。たびたびのご返信、心より感謝いたします。

[m.ts10806]

そのままコピペで使うのでは身につかないので
それぞれどのような意図で組まれているのか調べたり考えたりして、
より簡潔な書き方もぜひ挑戦してみてください。

[退会済みユーザー]

はい！ありがとうございます。

今回書いていただいた //コメント部分 はとても勉強になりました。これまでは仰るよおり全くわからないまま済ませて、質問、質問でした。

//フルーツ一覧をループ

というあたりからはまだまだ難しいです。精進いたします。

[m.ts10806]

var fluits_list = $(".fluits p");

対象のDOMが複数あるので配列で取得される　というだけの話です。
console.log()で確認してみれば分かります。
PHPで言えばvar_dump() 　　情報のデバッグ方法は真っ先に覚えておいてください。
エラーメッセージをそのまま検索にかけるのと同様、
悩むことが一気に減り、質問も減ります。

[退会済みユーザー]

あっとそれは、一番上の「//対象のフルーツを取得」のところですね。そこで代入し、代入以降なら「fluits_list」で呼び出せるんだな。というのは最近わかってきました。

さきほど書いたのは、真ん中の「//フルーツ一覧をループ」というあたりです。「i++」とか「ループ」という考え方。PHPでも出てきますけれど、まるで把握できておりません。

今日は少し検索してみます。
どうもありがとうございます。m(_ _)m

[m.ts10806]

> 「i++」とか「ループ」という考え方。PHPでも出てきますけれど、まるで把握できておりません。

PHPもjavascriptも考え方もやり方も変わりません。
PHPが理解できているなら問題ないはずです。

Answer 3

これでどうでしょう？

$(function(){
  $('input[name=chk_color]').on('change',function(){
    $('.ringo').toggle($('#red:checked,#green:checked,#yellow:checked').length>0);
    $('.mikan').toggle($('#red:checked,#yellow:checked').length>0);
    $('.budo').toggle($('#green:checked').length>0);
  }).eq(0).trigger('change');
});

※typo修正

Comments

[退会済みユーザー]

yambejpさん、いつもありがとうございます。

いま質問を思い返し、このようなご回答を頂戴したらどうしよう！と、思っていた矢先でした。

実は今回の質問は、「全ての色をチェックしたら、全ての色を持つ果物を表示する」という目的でした。（いつもいつも、誤解を招く表現だったり、不明瞭な表現ばかりで、誠に申し訳ございません。）

しかしyambejpさんのご回答ですと、「全ての色をチェックしたら、全ての果物を表示する（色が１つでも該当したら表示する）」というタイプのようです。（明らかに質問が悪いですよね…汗）

そんなわけで、誠に恐れ多いのですが、ベストアンサーはmts10806さんにゆずってあげて頂ければと思います。

でもこちらのタイプもいつかの参考にきっとなるので、チェックボックス用tipsがたまってうれしいです。どうもありがとうございます。

[m.ts10806]

> ベストアンサーはmts10806さんにゆずってあげて頂ければと思います。
上記コメントは不要、というかyambejpさんにも私にも失礼にあたるかと思います。
あくまでどの回答が良いかは質問者が決めることなので、回答メインでされている方はおそらくそこまで気にしないと思います（あくまで私の場合ですが）

[yambejp]

まぁお金もらって家庭教師してるわけじゃないし
回答は無償でやってるしょせんおせっかいでしかないので
BAがどうであってもそんなに気にしないですね
お互い最低限の礼儀をもっていればよいと思います

もちろん、参考になったor参考にならなかったを書いくれるのは
今後の回答方法への指針になるので、ありがたいです

[退会済みユーザー]

双方にフォローしているつもりが、まったく逆だったのですか…。ありがとうございます。BAについてはフォローする必要があるほど気にするものではないということ、把握致しました。これからは言わないよう気を付けます。