JavaScript: 全選択したチェックボックスの値を配列で取得するサンプル

## はじめに
チェックボックスの**全選択・全解除**と、ボタンを押したときにチェックされている**チェックボックスの値を配列で取得**するUIサンプルを作ります。（最後にサンプルもあります）

![0426.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445427/fb883b15-c031-cced-084f-7007faf349bb.gif)

全選択・全解除では、以下のように動作するようにします。

- 全選択をチェック後、各選択肢のチェックを外す => 全選択のチェックが外れる。
- 各選択肢のチェックボックスを全てチェックする => 全選択がチェックされる。

## HTML
```html:html
<!-- 全選択 -->
<label><input type="checkbox" id="check_all" name="check_all">すべて</label>

<!-- 選択肢 -->
<div id="items">
  <label><input type="checkbox" name="fruits" value="apple" class="item">りんご</label>
  <label><input type="checkbox" name="fruits" value="banana" class="item">バナナ</label>
  <label><input type="checkbox" name="fruits" value="grapes" class="item">ぶどう</label>
  <label><input type="checkbox" name="fruits" value="orange" class="item">オレンジ</label>
  <label><input type="checkbox" name="fruits" value="strawberry" class="item">いちご</label>
</div>

<!-- ボタン -->
<input type="button" value="チェックボックスの値を配列で取得" id="get_values">
```

`input`要素を`label`要素で括っておけば、チェックボックスとテキスト部分のどちらをクリックしても、チェックが入るので使い勝手が良くなります。

## チェックボックスの全選択・解除
### 1. 「選択肢」のチェック状態を切替える
```javascript:JavaScript
$('#check_all').on('change', function() {
  // 「選択肢」のチェック状態を切替える
  $('.item').prop('checked', $(this).is(':checked'));
});
```
処理はシンプルで、**「全選択」と「各選択肢」の状態を同じにしている**だけです。

- 「全選択」がチェックされている　：「選択肢」もすべてチェックする。
- 「全選択」のチェックが外れている：「各選択肢」もすべてチェックを外す。

`$(this).is(':checked')`で、「全選択」のチェック状態を取得しています。
なお、この箇所は`$(this).prop('checked')`とか`this.checked`でもOKです。

### 2. 「全選択」のチェック状態を切替える
```javascript:JavaScript
$('.item').on('change', function() {
  // 「全選択」のチェック状態を切替える
  if ($('#items :checked').length == $('#items :input').length){
    $('#check_all').prop('checked', true);
  }else{
    $('#check_all').prop('checked', false);
  }
});
```
各選択肢をチェックしたとき、選択肢のチェックボックス数と、チェック状態の数を比較します。

- 数が同数　　　　：「すべて」をチェック状態にします。 => `.prop('checked', true)`
- 数が同数ではない：「すべて」のチェックを外します。 　=> `.prop('checked', false)`



## チェックした値を配列で取得

### .each() を使用
```javascript:JavaScript
$('#get_values').on('click', function() {

  var vals = []; // 配列を定義
  $('input[name="fruits"]:checked').each(function() {
      vals.push( $(this).val() ); // 配列に値を追加
  });

  console.log(vals);
});
```

チェック済みのinput要素を`.each()`対象にするので、
`input[name="name属性名"]:checked`のように、セレクタに`:checked`を付けます。

チェック済みの値を格納する配列`vals`を定義しておき、`.push()`で追加しましょう。

```:実行結果（ボタンをクリック）
// 「りんご」と「オレンジ」のみチェック
["apple", "orange"]
```
ボタンを押せば、チェック済みの値が配列で取得できます。

### .map() を使用
```javascript:JavaScript
$('#get_values').on('click', function(){

  var vals = $('input[name="fruits"]:checked').map(function() {
    return $(this).val();
  }).get();

  console.log(vals);
});
```

`.map()`を使用しても、実行結果は`.each()`と同じです。



# 完成（サンプル）
最後に完成形の全体コードを載せておきます。（.map()版）

```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>全選択したチェックボックスの値を配列で取得するサンプル</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(function() {
  // チェックボックスの全選択・解除
  $('#check_all').on('change', function() {
    // 「選択肢」のチェック状態を切替える
    $('.item').prop('checked', $(this).is(':checked'));
  });

  $('.item').on('change', function() {
    // 「全選択」のチェック状態を切替える
    if ($('#items :checked').length == $('#items :input').length){
      $('#check_all').prop('checked', true);
    }else{
      $('#check_all').prop('checked', false);
    }
  });


  // チェックした値を配列で取得
  $('#get_values').on('click', function(){

    var vals = $('input[name="fruits"]:checked').map(function() {
      return $(this).val();
    }).get();

    console.log(vals);
  });
});
</script>
</head>
<body>
  <!-- 全選択 -->
  <label><input type="checkbox" id="check_all" name="check_all">すべて</label>

  <!-- 選択肢 -->
  <div id="items">
    <label><input type="checkbox" name="fruits" value="apple" class="item">りんご</label>
    <label><input type="checkbox" name="fruits" value="banana" class="item">バナナ</label>
    <label><input type="checkbox" name="fruits" value="grapes" class="item">ぶどう</label>
    <label><input type="checkbox" name="fruits" value="orange" class="item">オレンジ</label>
    <label><input type="checkbox" name="fruits" value="strawberry" class="item">いちご</label>
  </div>

  <!-- ボタン -->
  <input type="button" value="チェックボックスの値を配列で取得" id="get_values">
</body>
</html>
```