下のjqueryについて「★★★★」が機能しないのは、なぜでしょうか?
この星の部分は、
1つでも子にチェックがあるときに、親のエリアがクリックされたならば、そのときは子の要素を全て非表示にしたい。
という機能です。
現状はなぜか「その子は消えて、もう片方の子が表示されてしまう」という状態です。
どうやら、「||」が機能せずdisplay:none;
が効かずに、.toggle
だけが効いている状態のようです。
▼動くサンプル
https://jsfiddle.net/1mfv6qho/
▼そのコード
html
1<ul class="c-checklist"> 2 3 <li><input id="c-apple" type="checkbox" name="chk_fluits2"> 4 <p>2つとも表示切替</p> 5 <ul> 6 <li><input id="c-apple-1" class="check-c check-1" type="checkbox" name="chk_fluits" value="c-apple-1" target="c-apple-1"><label for="c-apple-1" class="check_label">apple1を表示切替</label></li> 7 <li><input id="c-apple-2" class="check-c check-2" type="checkbox" name="chk_fluits" value="c-apple-2" target="c-apple-2"><label for="c-apple-2" class="check_label">apple2を表示切替</label></li> 8 </ul> 9 </li> 10 11 <li><input id="c-grape" type="checkbox" name="chk_fluits2"> 12 <p>2つとも表示切替</p> 13 <ul> 14 <li><input id="c-grape-1" class="check-c check-1" type="checkbox" name="chk_fluits" value="c-grape-1" target="c-grape-1"><label for="c-grape-1" class="check_label">grape1を表示切替</label></li> 15 <li><input id="c-grape-2" class="check-c check-2" type="checkbox" name="chk_fluits" value="c-grape-2" target="c-grape-2"><label for="c-grape-2" class="check_label">grape2を表示切替</label></li> 16 </ul> 17 </li> 18 19</ul> 20 21<div class="respnce"> 22 <span class="c-apple-1 apple">apple1</span> 23 <span class="c-apple-2 apple">apple2</span> 24 <span class="c-grape-1 grape">grape1</span> 25 <span class="c-grape-2 grape">grape2</span> 26</div>
javasctip
1//////////////// 2////親子チェックの連動 3(function($){ 4 $('input[name="chk_fluits"]').on('change',function(){ 5 var p=$(this).closest('ul').closest('li').find('input[name="chk_fluits2"]'); 6 var c=$(this).closest('ul').find('input[name="chk_fluits"]'); 7 if(c.filter(':checked').length==2) p.prop('checked',true); 8 if(c.filter(':checked').length==0) p.prop('checked',false); 9 }).trigger('change'); 10 $('input[name="chk_fluits2"]').on('change',function(){ 11 $(this).siblings().find('input[name="chk_fluits"]').prop('checked',$(this).prop('checked')); 12 }).trigger('change'); 13 $('.c-checklist input[type=checkbox],.check_label').on('click',function(e){ 14 e.stopPropagation(); 15 }); 16 $('.c-checklist>li').on('click',function(e){ 17 $(this).find('[type=checkbox]').prop('checked',$(this).find('[type=checkbox]:checked').length==0?true:false); 18 }); 19})(jQuery); 20 21//////////////// 22////項目表示切替 23(function($){ 24 25 //親チェック時 26 $('.c-checklist > li').click(function(){ 27 var idp = $(this).find('input[name="chk_fluits2"]').attr('id'); 28 var id1 = $('.' + idp + '-1'); 29 var id2 = $('.' + idp + '-2'); 30 31 //子にチェックがなければ子を表示切替 32 if ($(id1).prop('checked',false) || $(id2).prop('checked',false)){ 33 $(id1).toggle() 34 .each(function(){ 35 if ($(this).css('display') == 'initial') 36 $(this).parent().prepend(this) 37 }); 38 $(id2).toggle() 39 .each(function(){ 40 if ($(this).css('display') == 'initial') 41 $(this).parent().prepend(this) 42 }); 43 } else { 44 //子にチェックがあれば子を非表示★★★★ 45 $(id1).css('display', 'none'); 46 $(id2).css('display', 'none'); 47 } 48 49 }); 50 51 //子チェック時 52 $('input[name="chk_fluits"]').change(function(event) { 53 event.preventDefault(); 54 var idc = $(this).attr('id'); 55 $('.' + idc) 56 .toggle() 57 .each(function(){ 58 if ($(this).css('display') == 'initial') 59 $(this).parent().prepend(this) 60 }); 61 }); 62 63})(jQuery); 64 65//////////////// 66////読み込み時 67(function($){ 68$(document).ready(function () { 69 $('input[name="chk_fluits"]').each(function(){ 70 if ($(this).prop("checked") == true) { 71 $( '.' + $(this).attr('id') ).css('display', 'initial'); 72 } else { 73 $( '.' + $(this).attr('id') ).css('display', 'none'); 74 } 75 }); 76}); 77})(jQuery);
回答4件
あなたの回答
tips
プレビュー