回答編集履歴

1 サンプルurlの作成

MasakazuFukami

MasakazuFukami score 1796

2017/09/07 14:21  投稿

僕も再現性がなかったので書き直しました。
考え方は
- ひとつひとつの状態を取るのではなくて、何か動作をするたびに全体時の状態を取得して反映
- チェックボックスは押した段階でstatusが変わるので、反映の関数を呼ぶだけ
```html
<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>
```
```js
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()
})
```
サンプルもどうぞ! [上記コードの動くやつ](https://codepen.io/fukaminmin/pen/QMRVNv)  
 
また、直接関係はありませんが、undefinedの比較は以下では通らないかと。
```js
if (typeof $(items).eq(i).data('lab') !== "undefined")
```
なので以下のように修正した方がいいと思います!
```js
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)
```
よろしければどうぞ!

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