[jQuery] チェックボックスの値を配列で取得する

2020-01-04JavaScriptAjax,jQuery

複数選択されたチェックボックスの値を配列で取得する方法。

Submit なら name 属性を配列にしておけば、配列で送信されるけど、 Ajax で送信する場合、自分で配列を作ってから送信となる。また今回は、選択されたチェックボックスは Ajax 送信後、選択不可となるようにした。

map() と each() を使った 2 つの方法をメモ。

チェックボックス値取得のサンプル

複数選択されたチェックボックスの値を配列で取得するサンプル。

「 map 」ボタンは map メソッドを使って取得。
「 each 」ボタンは each メソッドを使って取得している。

See the Pen Getting checkbox val with map & each by AgoPeanuts (@AgoPeanuts) on CodePen.

サンプル HTML

<table>
  <thead>
    <tr><th>Checkbox
  <tbody>
    <tr>
      <td><input type="checkbox" class="chk" name="ago" value="a1">
    <tr>
      <td><input type="checkbox" class="chk" name="ago" value="a2">
    <tr>
      <td><input type="checkbox" class="chk" name="ago" value="a3">
    <tr>
      <td><input type="checkbox" class="chk" name="ago" value="a4">
    <tr>
      <td><input type="checkbox" class="chk" name="ago" value="a5">
</table>
<button type='button' id='btn1' class="btn-square">map</button>
<button type='button' id='btn2' class="btn-square-shadow">each</button>

map メソッドを使った方法

$("#btn1").on("click", function(){
  
  // チェックされている値を配列に格納
  var chks = $('[class="chk"]:checked').map(function(){
      // 無効化する
      $(this).prop('disabled', true);
      // 値を返す
      return $(this).val();
  }).get();   // オブジェクトを配列に変換するメソッド
  
  console.log(chks);
  // ["a2", "a3"]
   
  // Ajax 処理
  $.ajax({
    type: "POST",
    url: "ago.php",
    data: {'checkbox' : chks},
    dataType : "json"
  }).done(function(data){
    // 成功した時の処理
   
    // 例えば、「 map 」ボタン無効化
    $('#btn1').prop('disabled', true);
   
  }).fail(function(XMLHttpRequest, textStatus, error){
    // 失敗した時の処理
  });
});

チェックされているチェックボックスは、 '[class="chk"]:checked' で取得する。
class を指定しているが、 '[class="ago"]:checked' のように name で指定してもいい。

map メソッドは返り値が jQuery オブジェクトとなるので、 get() メソッドを使って普通の配列に変換する。
文字列に変換したいときは、 .get().join() のように join() メソッドを繋げる。
join(',') とすると、チェックボックスの値がカンマ ( , ) で繋がった文字列として返ってくる。

return で返ってきた値は、変数 chks に格納される。

each メソッドを使った方法

$("#btn2").on("click", function(){
  // 配列を宣言
  var arr = [];
  
  $('[class="chk"]:checked').each(function(){
      // 無効化する
      $(this).prop('disabled', true);
   
      // チェックされているの値を配列に格納
      arr.push($(this).val());
  });
  console.log(arr);
});

each メソッドを使う場合には、空の配列を用意し、ループの中で配列に値を格納していく。