現在アコーディオン内にcheckboxが並び、アコーディオンヘッドに「全て選択」があるフォームを作っています。
html
1<div class="panel"> 2<div class="panel-head"> 3 <h4>路線名</h4> 4 <div class="check-right"> 5 <label><input class="checkall" type="checkbox">全て選択</label> 6 </div> 7</div> 8<div class="panel-body"> 9 <div class="col-md-3"><label><input name="station[]" data-lab="駅1" value="1133401" type="checkbox">駅1</label></div> 10 <div class="col-md-3"><label><input name="station[]" data-lab="駅2" value="1133402" type="checkbox">駅2</label></div> 11 <div class="col-md-3"><label><input name="station[]" data-lab="駅3" value="1133403" type="checkbox">駅3</label></div> 12 <div class="col-md-3"><label><input name="station[]" data-lab="駅4" value="1133404" type="checkbox">駅4</label></div> 13</div> 14 15<div id="choose_station" class="clearfix"> 16 <h4>選択した駅</h4> 17 <p></p> 18</div>
HTMLは上記簡単に書きましたが、少々手抜きもあり・・実際はBootstrapを使ってコーディングしています。
要件として
・普通に駅のチェックボックスをチェックした場合は#choose_station > pに値を入れていく
・全て選択をチェックした場合は.panel-body内のチェックボックスを全てチェックした上でその駅名を#choose_station > pに値を入れていく
・普通に駅のチェックボックスのチェックを外した場合は、その駅だけ#choose_station > pから外す
・全て選択のチェックを外した場合は.panel-body内のチェックボックスを全てオフにし、#choose_station > pの値を削除する
としています。
jacascript
1//通常チェック 2$('.panel-body [type="checkbox"]').on('click',function(){ 3 var labelval = '<span>' + $(this).data('lab') + '</span>'; 4 if($(this).prop('checked')) { 5 $('#choose_station p').append(labelval); 6 } else { 7 var txt = $('#choose_area p').html(); 8 $('#choose_station p').html(txt.replace(labelval,'')); 9 } 10}); 11 12//全て選択 13$('.checkall').on('click',function(){ 14 var items = $(this).parents('.panel').children('.panel-body').find('input[type="checkbox"]'); 15 if($(this).is(':checked')) { 16 $(items).prop('checked', true); 17 for (var i=0; i<$(items).length; i++) { 18 var labelval = '<span>' + $(items).eq(i).data('lab') + '</span>'; 19 if ($('#choose_station p').html().indexOf($(items).eq(i).data('lab')) != -1) { 20 } else { 21 $('#choose_station p').append(labelval); 22 } 23 } 24 } else { 25 $(items).prop('checked', false); 26 for (var i=0; i<$(items).length; i++) { 27 var labelval = '<span>' + $(items).eq(i).data('lab') + '</span>'; 28 if ($('#choose_station p').html().indexOf($(items).eq(i).data('lab')) != -1) { 29 var txt = $('#choose_station p').html(); 30 $('#choose_station p').html(txt.replace(labelval,'')); 31 } 32 } 33 } 34});
この状態で基本うまくいきます。
ただし、アコーディオンを2段階(路線→駅)ではなく3段階(路線会社→路線→駅、panel-body内に同じpanelが存在する感じです)にした場合、「全て選択」をクリックすると
undefiled 駅1 駅2 駅3 駅4
という内容が#choose_station内に表示されます。
コード的に$(items).eq(i).data('lab')を<span>で囲っているのですが、ご丁寧に<span>undefined</span>になっていました。
全て選択をチェックした場合のforループ内にconsole.log($(items).eq(i).data('lab'));を入れると、正常に駅1~駅4が出力されています。
if (typeof $(items).eq(i).data('lab') !== "undefined")
で弾いてもundefinedが入ってきます。
どこでそれが入ってきて何が出力されているのか分からず・・ご質問させていただきました。
console.logでは駅1~駅4を返すのに、appendするとundefinedを返してしまうのか。
$(items).lengthは4なのになぜundefinedを含めて5周しているのか・
何卒ご教授の程お願い致します。
回答3件
あなたの回答
tips
プレビュー