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

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

ただいまの
回答率

89.99%

if文で複数のボタンが選択された時に情報を表示できるようにしたい

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 556

Anfanger

score 22

条件分岐でmeatとcandyのチェックボックスを両方選択した場合の情報を出したいのですが、どうしても片方の情報しか出せません
どのように分岐すれば良いでしょうか?

getProductsList();

        $('.refine-search-form input').on('change', function(event) {
            // createArray(event);
            getProductsList(event);
        });

        /**
         * ---------------------- ajaxでデータを取得する関数 ------------------------
         */

        function getProductsList(event) {
            $.ajax({
                url: './service.json',
                method: 'get',
                dataType: 'json'
            })
            .done(function(data) {
                createArray(data, event);
            });
        }
<div class="products block">
                <h2 class="section-header">
                    <span>ミルミールの製品</span>
                </h2>
                <form class="refine-search-form fs-18">
                    <input type="hidden" name="mode" value="json" class="target">
                    <input type="hidden" name="disp_number" value="1000" class="target">
                    <input type="checkbox" value="candy" class="target">
                    <label for="category_id34">インフルブロックのど飴</label>
                    <input type="checkbox" value="pastry" class="target">
                    <label for="category_id32">菓子</label>
                    <input type="checkbox" value="juice" class="target">
                    <label for="category_id31">ジュース・飲料</label>
                    <input type="checkbox" value="seasoning" class="target">
                    <label for="category_id30">調味料</label>
                    <input type="checkbox" value="vegetables" class="target">
                    <label for="category_id29">野菜・果物</label>
                    <input type="checkbox" value="fish" class="target">
                    <label for="category_id28">鮮魚・海産物</label>
                    <input type="checkbox" value="meat" class="target">
                    <label for="category_id27">牛肉・豚肉・鶏肉他</label>
                    <input type="checkbox" value="food" class="target">
                    <label for="category_id8">食品</label>
                    <input type="checkbox" value="otherwise" class="target">
                    <label for="category_id33">その他</label>
                </form>
                <div class="block-body">
                    <ul class="refine-seach list" id="demo">
                    </ul>
                </div>
            </div>
        function createArray(data, event) {
            $('.refine-seach').empty();
            var candyArray = [1,2,3,4,5];
            var meatArray = [10,11,12,13,14,15,16,17,18,19];
            var newArray = [];
            var targetVal;
            if (event) {
            console.log(event);
                targetVal = $(event.currentTarget).val();
            }
        if(targetVal == 'candy' && targetVal == 'meat') {
                newArray = data.products;
            } else if(targetVal == 'meat') {
                newArray = data.products.filter(function(item,i) {
                     return item.product_id >= 10;
                });
                console.log(newArray);
            } else if(targetVal == 'candy') {
                newArray = data.products.filter(function(item,i) {
                     return item.product_id <= 5;
                });
            } else {
                newArray = data.products;
                console.log(newArray);
            };
                showData(newArray);
        }
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • x_x

    2018/10/19 16:08

    HTMLもお願いします

    キャンセル

  • x_x

    2018/10/19 16:18

    createArray()を呼び出しているところもお願いします

    キャンセル

  • Anfanger

    2018/10/19 16:22

    追加しました

    キャンセル

回答 2

checkベストアンサー

+1

こんな方法はいかがでしょう。

①全てのチェックボックスに適当なname(以下ではname="checkbox")を付与する。

<div class="products block">
    <h2 class="section-header">
        <span>ミルミールの製品</span>
    </h2>
    <form class="refine-search-form fs-18">
        <input type="hidden" name="mode" value="json" class="target">
        <input type="hidden" name="disp_number" value="1000" class="target">
        <input type="checkbox" name="checkbox" value="candy" class="target">

(中略)

        <input type="checkbox" name="checkbox" value="otherwise" class="target">
        <label for="category_id33">その他</label>
    </form>
    <div class="block-body">
        <ul class="refine-seach list" id="demo">
        </ul>
    </div>
</div>

②名前を付与したチェックボックスについて、チェックが入った項目のvalueを配列で受け取る。

var array_check = $('input[name="checkbox"]:checked').map(function() { return $(this).val(); })

③配列に値が含まれるか確認する。

if($.inArray('candy', array_check) != -1 && $.inArray('meat', array_check) != -1) {


js STUDIO:$.inArray()

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/10/25 15:28

    理解しました。
    != -1のように不等価演算子や−1を指定しているはどうしてですか?

    キャンセル

  • 2018/10/25 15:45 編集

    本回答の 2018/10/21 00:16 の私のコメント(このコメントの8つ上)を参照してください。
    そのコメントにも記載してありますが、今回は「inArray()」を使用しているため、
    「inArray()」の仕様で「配列に含まれている」かどうかを確認するためにそのような記述になっています。
    (「inArray()」の仕様については回答内最下段のリンク先を参照いただきたく。)

    キャンセル

  • 2018/11/01 19:12

    長々とありがとうございました。
    またよろしくお願いします。

    キャンセル

+1

dataはサーバーの返りなので詳細は分かりませんが、ここは絶対に成立しないので誤りでしょう。

if(targetVal == 'candy' && targetVal == 'meat') {

次のように修正します。

var checkVals = $('.refine-search-form input').map(function(index, element) { return element.value; }).get();
if (checkVals && checkVals.includes('candy') && checkVals.includes('meat')) {


https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/10/19 16:51

    補足しておくと、
    $('.refine-search-form input').on('change', function(event) {
    で event が input の change で発生したものだとわかるため、targetVal にはそのときの単一の値が入っています。これは意図するものではないでしょう。
    checkValsですべて判定すればいいのですが、Ajax呼び出し時とは違うということに気を付けなければいけません。

    キャンセル

  • 2018/10/19 19:19

    確認ですが、javascriptの{}内には何を入れれば良いでしょうか?

    キャンセル

  • 2018/10/21 00:15 編集

    申し訳ないです。コメントする回答を間違えました…。

    キャンセル

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

  • ただいまの回答率 89.99%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる