現在アコーディオン内にcheckboxが並び、アコーディオンヘッドに「全て選択」があるフォームを作っています。
<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="駅１" value="1133401" type="checkbox">駅１</label></div>
<div class="col-md-3"><label><input name="station[]" data-lab="駅２" value="1133402" type="checkbox">駅２</label></div>
<div class="col-md-3"><label><input name="station[]" data-lab="駅３" value="1133403" type="checkbox">駅３</label></div>
<div class="col-md-3"><label><input name="station[]" data-lab="駅４" value="1133404" type="checkbox">駅４</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の値を削除する
としています。
//通常チェック
$('.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,''));
}
}
}
});この状態で基本うまくいきます。
ただし、アコーディオンを２段階（路線→駅）ではなく３段階（路線会社→路線→駅、panel-body内に同じpanelが存在する感じです）にした場合、「全て選択」をクリックすると
undefiled 駅１ 駅２ 駅３ 駅４
という内容が#choose_station内に表示されます。
コード的に$(items).eq(i).data('lab')を<span>で囲っているのですが、ご丁寧に<span>undefined</span>になっていました。
全て選択をチェックした場合のforループ内にconsole.log($(items).eq(i).data('lab'));を入れると、正常に駅１～駅４が出力されています。
if (typeof $(items).eq(i).data('lab') !== "undefined")
で弾いてもundefinedが入ってきます。
どこでそれが入ってきて何が出力されているのか分からず・・ご質問させていただきました。
console.logでは駅１～駅４を返すのに、appendするとundefinedを返してしまうのか。
$(items).lengthは４なのになぜundefinedを含めて５周しているのか・
何卒ご教授の程お願い致します。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+2
参考までに
$(function(){
$('.checkall').on('change',function(){
var flg=$(this).prop('checked');
$(this).closest('.panel').find('.panel-body input[type="checkbox"]').prop('checked',flg).first().trigger('change');
});
$('.panel .panel-body input[type="checkbox"]').on('change',function(){
var l1=$(this).closest('.panel').find('.panel-body input[type="checkbox"]').length;
var l2=$(this).closest('.panel').find('.panel-body input[type="checkbox"]:checked').length;
$(this).closest('.panel').find('.checkall').prop('checked',l1==l2);
var str="";
$(this).closest('.panel').find('.panel-body input[type="checkbox"]:checked').each(function(){
str+=(str==""?"":" ")+$(this).data('lab');
});
$('#choose_station p').html(str);
});
});追記
よくよく考えたら、チェックない数が0ならという考え方の方がラクですね
var flg=$(this).closest('.panel').find('.panel-body').find('input[type="checkbox"]:not(:checked)').length==0;
$(this).closest('.panel').find('.checkall').prop('checked',flg);投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+2
再現しないコードなので気になった点を。
$(this).parents('.panel')
複数取っていますが、closest('.panel')ではだめでしょうか？
.find('input[type="checkbox"]')
必ずdata-lab属性が必要であれば、ここで.find('input[type="checkbox"][data-lab]')としておいたほうがいいかもしれません。
ないものが見つかればundefinedになります。
html()で取得した文字列と比較(indexOfやreplace)しているのが気になります。想定しているものがそのまま取れるとは限りません。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+2
僕も再現性がなかったので書き直しました。
考え方は
- ひとつひとつの状態を取るのではなくて、何か動作をするたびに全体時の状態を取得して反映
- チェックボックスは押した段階でstatusが変わるので、反映の関数を呼ぶだけ
<input type="checkbox" id="jsCheckAll"/>全部
<input type="checkbox" class="jsCheck" data-name="駅1"/>駅1
<input type="checkbox" class="jsCheck" data-name="駅2"/>駅2
<input type="checkbox" class="jsCheck" data-name="駅3"/>駅3
<input type="checkbox" class="jsCheck" data-name="駅4"/>駅4
<input type="checkbox" class="jsCheck" data-name="駅5"/>駅5
<input type="checkbox" class="jsCheck" data-name="駅5"/>駅5
<div id="jsShowArea"></div>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)よろしければどうぞ！
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 89.52%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
Lhankor_Mhy
2017/09/07 13:18
ご提示のコードでは再現しませんでしたので、ここに含まれていない部分に原因があるかと思います。不具合の性質上、clickイベントに原因があるのではないかな、と思いました。
takepieee
2017/09/07 13:50
ありがとうございます。実際のhtml系はbootstrapのアコーディオンを使っています。実際上記の階層だと問題はないのですが、panel-body内にpanelがある感じ（その場合内側のpanel内だけに全て選択があるイメージ）ですとうまく動かないのです・・
Lhankor_Mhy
2017/09/07 14:04
とすると、$('.panel-body [type="checkbox"]') は、子アコーディオン内の '.panel-head [type="checkbox"]' も含むのではありませんか？ お試しください。
takepieee
2017/09/07 14:10
孫のcollapseにしか全て選択チェックはない状態なので、試しに.parent().parent()で階層指定しましたが、それでも結果は変わりませんでした。なにより疑問なのはconsole.logで正しい結果をループ出来ているのにappendで埋め込んだ途端にundefinedが出力されることですね・・
Lhankor_Mhy
2017/09/07 14:34
いえ、そうではなくて、通常チェックイベントは、子アコーディオン内の '.panel-head [type="checkbox"]'をクリックしたときにも動作するのでは、ということです。ですから試しに、通常チェックイベント内でログをとってみてください、ということです。
Lhankor_Mhy
2017/09/07 14:35
あー、この文脈で言うと「孫アコーディオン内の '.panel-head [type="checkbox"]'」になるんでしょうか？まあとにかくお試しください。
takepieee
2017/09/07 15:01
ご指摘ご指導誠にありがとうございました。無事解決致しました。