条件
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
ヒントでもいいのでなにかご指示いただけると嬉しいです。
なるべく早く、ご回答内容/いただいた質問に答えたいと考えていますが
作業中のため返信が遅くなる可能性がございます、ご了承いただけますと幸いです。
それではお忙しい中恐れ入りますがよろしくお願いいたします。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/05/14 04:24
2019/05/14 04:31
2019/05/14 04:33
2019/05/14 04:55