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

19247 ワード
HTML JavaScript jQuery UI HTML テキストリンク

はじめに

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

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

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

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
$('#check_all').on('change', function() {
  // 「選択肢」のチェック状態を切替える
  $('.item').prop('checked', $(this).is(':checked'));
});

処理はシンプルで、「全選択」と「各選択肢」の状態を同じにしているだけです。

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

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

2. 「全選択」のチェック状態を切替える

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
$('#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
$('#get_values').on('click', function(){

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

  console.log(vals);
});

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

完成（サンプル）

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

<!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>