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

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

ただいまの
回答率

90.34%

チェックボックスの選択によって要素を非表示/表示切り替えたい

解決済

回答 2

投稿

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

kitty

score 13

条件

4つのチェックボックスがあります。
デフォルトで選択はされていない状態です。
何個でも選択ができて、チェックをはずしたりつけたりは自由です。

checkbox1をチェック→エリアAが非表示になる
checkbox1をチェックした状態でそれ以外のチェックボックスを1個でもチェックする→エリアAは表示

checkbox1以外をチェック→エリアAは表示されたまま
checkbox1以外がチェックされた状態で、checkbox1をチェックしてもareaAは非表示にならない

つまり、checkbox1だけがチェックされた条件下でのみareaAは非表示にしたいのです。

該当のHTML

※このコードでは上記のcheckbox1をチェックボックス1という名前にしています。
<dl>
  <dt>見出し</dt>
  <dd>
    <div class="contact-col">
      <div class="contact-col__item">
        <input type="checkbox" name="サービス" id="サービス-チェックボックス1" value="チェックボックス1" class="validate[required]">
        <label for="サービス-チェックボックス1" class="">チェックボックス1</label>
      </div>
      <div class="contact-col__item">
        <input type="checkbox" name="サービス" id="サービス-チェックボックス2" value="チェックボックス2" class="validate[required]">
        <label for="サービス-チェックボックス2" class="">チェックボックス2</label>
      </div>
      <div class="contact-col__item">
        <input type="checkbox" name="サービス" id="サービス-チェックボックス3" value="チェックボックス3" class="validate[required]">
        <label for="サービス-チェックボックス3" class="">チェックボックス3</label>
      </div>
      <div class="contact-col__item">
        <input type="checkbox" name="サービス" id="サービス-チェックボックス4" value="チェックボックス4" class="validate[required]">
        <label for="サービス-チェックボックス4" class="">チェックボックス4</label>
      </div>
    </div>
  </dd>
  <dt>そのほかのテキストそのほかのテキストそのほかのテキストそのほかのテキストそのほかのテキストそのほかのテキスト</dt>
  <dd>そのほかのテキストそのほかのテキストそのほかのテキストそのほかのテキストそのほかのテキストそのほかのテキスト</dd>
  <dt>そのほかのテキストそのほかのテキストそのほかのテキストそのほかのテキストそのほかのテキストそのほかのテキストそのほかのテキストそのほかのテキスト</dt>
  <dd class="areaA">
    表示/非表示が切り替わるエリア表示/非表示が切り替わるエリア表示/非表示が切り替わるエリア表示/非表示が切り替わるエリア表示/非表示が切り替わるエリア表示/非表示が切り替わるエリア表示/非表示が切り替わるエリア表示/非表示が切り替わるエリア表示/非表示が切り替わるエリア表示/非表示が切り替わるエリア表示/非表示が切り替わるエリア表示/非表示が切り替わるエリア表示/非表示が切り替わるエリア表示/非表示が切り替わるエリア
  </dd>
</dl>

該当のjquery(※こちらだとチェックボックス1をチェックしたあと、それ以外のチェックボックスをチェックしてもareaAが表示されない)

  $(function() {
    $('[name="サービス"]').change(function() {
      var val = $('[name="サービス"]:checked').val();
      var target = $('[name="サービス"]').closest('dl').find('.areaA');
      if(val == 'チェックボックス1') {
        target.addClass('is-hidden');
      } else {
        target.removeClass('is-hidden');
        target.find('input:radio, input:checkbox').attr('checked', true);
        target.find('input:text').val('');
        target.find('.formError').add();//バリデーション対象なので
      }
    });
  });

ためしたこと

試したこと①
チェックボックス1が選択されている、かつチェックボックスがひとつ以上選択されている時のみ、
で条件指定をしてみましたがうまくいきませんでした。

var check_count = $('[name="サービス"]:checked').length;
if(val == 'チェックボックス1' && check_count <= 1) {...


試したこと②
elseだけではなく、指定をしてみても動きませんでした。

else if(!val == 'チェックボックス1') {...

ヒントでもいいのでなにかご指示いただけると嬉しいです。
なるべく早く、ご回答内容/いただいた質問に答えたいと考えていますが
作業中のため返信が遅くなる可能性がございます、ご了承いただけますと幸いです。
それではお忙しい中恐れ入りますがよろしくお願いいたします。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

checkベストアンサー

+3

$(function(){
  $('[name=サービス]').on('change',function(){
    var flg=$('[name=サービス]:checked').length==1 && $('[name=サービス]:checked').val()=="チェックボックス1";
    // var flg=$('[name=service]:checked').length==1 && $('[name=service]:checked').val()=="チェックボックス1";
    $('.areaA').toggle(!flg);
  });
});

追記

もっと効率的にかけるかと思ったら結局ソースが長くなった件

    var flg=$('[name=サービス]:checked').map(function(){return $(this).val();}).get().join(",")=="チェックボックス1";
    //var flg=$('[name=service]:checked').map(function(){return $(this).val();}).get().join(",")=="チェックボックス1";

※ 指摘を受けて一部修正

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/05/14 13:24

    yambejpさま。
    本当にありがとうございました。
    最初にいただいた記述が今の知識でも理解できたのでそちらを使用させていただき、無事動かすことができました。また何かありましたらご相談させてください、よろしくお願いいたします。

    キャンセル

  • 2019/05/14 13:31

    name属性は"サービス"では?
    動作確認したのでしょうか?

    キャンセル

  • 2019/05/14 13:33

    あ、ごめんなさい
    検証するときにserviceに書き直していたのを元に戻すときに
    1箇所しかなおしてませんでした
    修正しておきます

    キャンセル

  • 2019/05/14 13:55

    すみません、各チェックボックスの名前などはteratailにあげるため仮でいれていました。
    そのため動作確認するときはすべて名称を正式のものに書き換えていたので、
    そちらは見落としていました。お二人方ともにご確認ありがとうございました。

    キャンセル

+2

次のように記述することで、選択値を配列で取得できます。

      var val = $('[name="サービス"]:checked').map(function(index, element) {
        return element.value;
      }).get(); // ["チェックボックス1", "チェックボックス2"]

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/05/14 13:56

    ご回答ありがとうございました。
    こちらの内容も試してみます。
    また機会がありましたら何卒よろしくお願いいたします。

    キャンセル

  • 2019/05/15 00:00

    動作確認できました。
    ただ、条件分岐のところで配列から値を取得する?方法がわからなかったので、
    文字列(join()を追加)に変換して希望通りに動くようになりました。
    勉強になりました。ありがとうございました。

    動いたコード
    $(function() {
    $('[name="サービス"]').change(function() {
    var val = $('[name="サービス"]:checked').map(function(index,element){
    return element.value;
    }).get().join();
    if(val === 'チェックボックス1') {
    $('.areaA').addClass('is-hidden');
    } else {
    $('.areaA').removeClass('is-hidden');
    }
    });
    });

    キャンセル

  • 2019/05/15 09:28

    各値によりますが、join()するよりは個数と値を見たほうが安全です。

    キャンセル

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

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

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