質問: $('#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')をで囲っているのですが、ご丁寧にundefinedになっていました。 全て選択をチェックした場合の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周しているのか・ 何卒ご教授の程お願い致します。
回答: 僕も再現性がなかったので書き直しました。 考え方は * ひとつひとつの状態を取るのではなくて、何か動作をするたびに全体時の状態を取得して反映 * チェックボックスは押した段階でstatusが変わるので、反映の関数を呼ぶだけ ``` 全部 駅1 駅2 駅3 駅4 駅5 駅5 ``` ``` var $checkAll = $('#jsCheckAll'); var $checkboxes = $('.jsCheck'); var $jsShowArea = $('#jsShowArea'); // チェックボックス全体からチェック済みだけを取得して書き出す var showCheckedStations = function(){ var chosenTexts = [] $checkboxes.each(function(){ if($(this).prop('checked')){ chosenTexts.push($(this).attr('data-name')) } }) $jsShowArea.text(chosenTexts.join(',')) console.log(chosenTexts) } // 全選択をクリックしたら、全選択の状態をすべてに反映する $('#jsCheckAll').on('change', function(){ var isAllChecked = $(this).prop('checked'); $checkboxes.each(function(){ $(this).prop('checked', isAllChecked) }) showCheckedStations() }) // ひとつひとつのチェックボックスを押すと、状態は既に変わっているので反映するだけ $checkboxes.on('change', function(){ showCheckedStations() }) ``` サンプルもどうぞ! 上記コードの動くやつ また、直接関係はありませんが、undefinedの比較は以下では通らないかと。 ``` if (typeof $(items).eq(i).data('lab') !== "undefined") ``` なので以下のように修正した方がいいと思います! ``` if (typeof $(items).eq(i).data('lab') != "undefined") // or if (typeof $(items).eq(i).data('lab') !== undefined) // さらに厳格にすると if (typeof $(items).eq(i).data('lab') !== void 0) ``` よろしければどうぞ!