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

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

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

1500閲覧

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

kitty

総合スコア15

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2019/05/14 03:57

条件

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

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

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

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

該当のHTML

html

1※このコードでは上記のcheckbox1をチェックボックス1という名前にしています。 2<dl> 3 <dt>見出し</dt> 4 <dd> 5 <div class="contact-col"> 6 <div class="contact-col__item"> 7 <input type="checkbox" name="サービス" id="サービス-チェックボックス1" value="チェックボックス1" class="validate[required]"> 8 <label for="サービス-チェックボックス1" class="">チェックボックス1</label> 9 </div> 10 <div class="contact-col__item"> 11 <input type="checkbox" name="サービス" id="サービス-チェックボックス2" value="チェックボックス2" class="validate[required]"> 12 <label for="サービス-チェックボックス2" class="">チェックボックス2</label> 13 </div> 14 <div class="contact-col__item"> 15 <input type="checkbox" name="サービス" id="サービス-チェックボックス3" value="チェックボックス3" class="validate[required]"> 16 <label for="サービス-チェックボックス3" class="">チェックボックス3</label> 17 </div> 18 <div class="contact-col__item"> 19 <input type="checkbox" name="サービス" id="サービス-チェックボックス4" value="チェックボックス4" class="validate[required]"> 20 <label for="サービス-チェックボックス4" class="">チェックボックス4</label> 21 </div> 22 </div> 23 </dd> 24 <dt>そのほかのテキストそのほかのテキストそのほかのテキストそのほかのテキストそのほかのテキストそのほかのテキスト</dt> 25 <dd>そのほかのテキストそのほかのテキストそのほかのテキストそのほかのテキストそのほかのテキストそのほかのテキスト</dd> 26 <dt>そのほかのテキストそのほかのテキストそのほかのテキストそのほかのテキストそのほかのテキストそのほかのテキストそのほかのテキストそのほかのテキスト</dt> 27 <dd class="areaA"> 28 表示/非表示が切り替わるエリア表示/非表示が切り替わるエリア表示/非表示が切り替わるエリア表示/非表示が切り替わるエリア表示/非表示が切り替わるエリア表示/非表示が切り替わるエリア表示/非表示が切り替わるエリア表示/非表示が切り替わるエリア表示/非表示が切り替わるエリア表示/非表示が切り替わるエリア表示/非表示が切り替わるエリア表示/非表示が切り替わるエリア表示/非表示が切り替わるエリア表示/非表示が切り替わるエリア 29 </dd> 30</dl>

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

jquery

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

ためしたこと

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

jquery

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

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

jquery

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

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

javascript

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

追記

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

javascript

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

※ 指摘を受けて一部修正

投稿2019/05/14 04:04

編集2019/05/14 04:36
yambejp

総合スコア114585

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kitty

2019/05/14 04:24

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

2019/05/14 04:31

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

2019/05/14 04:33

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

2019/05/14 04:55

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

0

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

JavaScript

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

投稿2019/05/14 04:27

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kitty

2019/05/14 04:56

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

2019/05/14 15: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'); } }); });
x_x

2019/05/15 00:28

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問