質問編集履歴

2 指摘を受けて微修正

takepieee

takepieee score 676

2017/09/07 14:14  投稿

[全て選択]ボタンクリック時にappendでundefinedが出力される
現在アコーディオン内にcheckboxが並び、アコーディオンヘッドに「全て選択」があるフォームを作っています。
```html
<div class="panel">
<div class="panel-head">
   <h4>路線名</h4>
   <div class="check-right">
       <label><input class="checkall" type="checkbox">全て選択</label>
   </div>
</div>
<div class="panel-body">
   <div class="col-md-3"><label><input name="station[]" data-lab="駅1" value="1133401" type="checkbox">駅1</label></div>
   <div class="col-md-3"><label><input name="station[]" data-lab="駅2" value="1133402" type="checkbox">駅2</label></div>
   <div class="col-md-3"><label><input name="station[]" data-lab="駅3" value="1133403" type="checkbox">駅3</label></div>
   <div class="col-md-3"><label><input name="station[]" data-lab="駅4" value="1133404" type="checkbox">駅4</label></div>
</div>
<div id="choose_station" class="clearfix">
   <h4>選択した駅</h4>
   <p></p>
</div>
```
HTMLは上記簡単に書きましたが、少々手抜きもあり・・実際はBootstrapを使ってコーディングしています。
要件として
・普通に駅のチェックボックスをチェックした場合は#choose_station > pに値を入れていく
・全て選択をチェックした場合は.panel-body内のチェックボックスを全てチェックした上でその駅名を#choose_station > pに値を入れていく
・普通に駅のチェックボックスのチェックを外した場合は、その駅だけ#choose_station > pから外す
・全て選択のチェックを外した場合は.panel-body内のチェックボックスを全てオフにし、#choose_station > pの値を削除する
としています。
```jacascript
//通常チェック
$('.panel-body [type="checkbox"]').on('click',function(){
   var labelval = '<span>' + $(this).data('lab') + '</span>';
   if($(this).prop('checked')) {
       $('#choose_station p').append(labelval);
   } else {
       var txt = $('#choose_area p').html();
       $('#choose_station p').html(txt.replace(labelval,''));
   }
});
//全て選択
$('.checkall').on('click',function(){
   var items = $(this).parents('.panel').children('.panel-body').find('input[type="checkbox"]');
   if($(this).is(':checked')) {
       $(items).prop('checked', true);
       for (var i=0; i<$(items).length; i++) {
           var labelval = '<span>' + $(items).eq(i).data('lab') + '</span>';
           if ($('#choose_station p').html().indexOf($(items).eq(i).data('lab')) != -1) {
           } else {
               $('#choose_station p').append(labelval);
           }
       }
   } else {
       $(items).prop('checked', false);
       for (var i=0; i<$(items).length; i++) {
           var labelval = '<span>' + $(items).eq(i).data('lab') + '</span>';
           if ($('#choose_station p').html().indexOf($(items).eq(i).data('lab')) != -1) {
               var txt = $('#choose_station p').html();
               $('#choose_station p').html(txt.replace(labelval,''));
           }
       }
   }
});
```
この状態で基本うまくいきます。
ただし、アコーディオンを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周しているのか・  
 
何卒ご教授の程お願い致します。
  • JavaScript

    22095 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    8758 questions

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

1 指摘を受けた部分を追記

takepieee

takepieee score 676

2017/09/07 14:03  投稿

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

    22095 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    8758 questions

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

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る