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

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

ただいまの
回答率

90.36%

  • JavaScript

    18601questions

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

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

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 1,198
退会済みユーザー

退会済みユーザー

目的

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

次の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

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • 退会済みユーザー

    退会済みユーザー

    2018/04/05 18:02

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

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2018/04/05 18:03

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

    キャンセル

  • 退会済みユーザー

    2018/04/06 19:03

    複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という意見がありました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

回答 3

checkベストアンサー

+3

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

<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);

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/04/05 17:48

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

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

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

    キャンセル

  • 2018/04/05 18:18 編集

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

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

    キャンセル

  • 2018/04/05 18:42

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

    キャンセル

  • 2018/04/05 18:49

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

    キャンセル

  • 2018/04/05 18:49

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

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

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

    キャンセル

  • 2018/04/05 18:50

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

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

    キャンセル

  • 2018/04/05 18:55 編集

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

    キャンセル

  • 2018/04/05 19:11

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

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

    キャンセル

  • 2018/04/05 19:15

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

    キャンセル

  • 2018/04/05 19:18 編集

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

    キャンセル

  • 2018/04/05 20:44

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

    キャンセル

  • 2018/04/06 06:44

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

    キャンセル

  • 2018/04/06 11:34

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

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

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

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

    キャンセル

  • 2018/04/06 11:38

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

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

    キャンセル

  • 2018/04/06 13:50

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

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

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

    キャンセル

  • 2018/04/06 13:52

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

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

    キャンセル

+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修正

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/04/05 17:57 編集

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

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

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

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

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

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

    キャンセル

  • 2018/04/05 18:20

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

    キャンセル

  • 2018/04/05 18:28

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

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

    キャンセル

  • 2018/04/05 18:39

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

    キャンセル

+3

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>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/04/05 18:05

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

    キャンセル

同じタグがついた質問を見る

  • JavaScript

    18601questions

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