複数のチェックボックスのValue値を取得したい

Question

前提・実現したいこと

後述のパターン2のやり方で、同じname属性を与えたチェックボックスのvalue値を取得したい。

試したこと（パターン1）

チェックボックスをクリックしたら、選択済の値を取得します（コンソールに出します）。
「あいうえお、かきくけこ、さしすせそ」の3つをクリックします。

<label><input type="checkbox" name="aiueo" value="あいうえお">あいうえお</label>
<label><input type="checkbox" name="aiueo" value="かきくけこ">かきくけこ</label>
<label><input type="checkbox" name="aiueo" value="さしすせそ">さしすせそ</label>

$('input[name=aiueo]').on('click', function(){
  var vals = $('input[name=aiueo]:checked').map(function(){
    return $(this).val();
  }).get();
  console.log("チェックボックスの値は => " , vals);
});

コンソールの結果は下記。

チェックボックスの値は => ["あいうえお", "かきくけこ", "さしすせそ"]

ここまでは思った通りです。

さらに試したこと（パターン2）

チェックボックスをクリックした後、「チェック」ボタンをクリックで値を取得します（コンソールに出します）。
同じく、「あいうえお、かきくけこ、さしすせそ」の3つをクリックします。

<label><input type="checkbox" name="aiueo" value="あいうえお">あいうえお</label>
<label><input type="checkbox" name="aiueo" value="かきくけこ">かきくけこ</label>
<label><input type="checkbox" name="aiueo" value="さしすせそ">さしすせそ</label>
<button id="btn_chk">チェック</button>

$("#btn_chk").on("click", function(){
  var tgt = $('input[name=aiueo]:checked');
  var vals = tgt.map(function(){
    return tgt.val();
  }).get();
  console.log("チェックボックスの値は => " , vals);
});

コンソールの結果は下記。

チェックボックスの値は => ["あいうえお", "あいうえお", "あいうえお"]

配列の要素数は合っていますが、内容が全て「あいうえお」になります。
続いて、このまま「あいうえお」だけチェックを外して、ボタンを押す。

チェックボックスの値は => ["かきくけこ", "かきくけこ"]

？？？

---

「ボタンをクリックで結果を出す」パターン2の方法で、["あいうえお", "かきくけこ", "さしすせそ"]と結果を出す事はできるのでしょうか。
ご教示、よろしくお願いいたします。

Answer 1

単純に1番目でやっている作業を踏襲するだけですよね？

return tgt.val();

を

 return $(this).val();

とするだけです。

Comments

[nnn24]

ご回答ありがとうございます。
希望とする結果が得られました！！

少し難しく考えすぎていたようです。。。本当にありがとうございます。

Answer 2

「ボタンをクリックで結果を出す」パターン2の方法で、["あいうえお", "かきくけこ", "さしすせそ"]と結果を出す事はできるのでしょうか。

できません。tgt.val()というように、複数選択されたjQueryオブジェクトに対してval()を取ると、先頭の要素の値を取得する、という仕様となっています（jQuery公式）。

（もっともな話として、どういう理由で「パターン2」のように書きたいかの理由があれば、別の手段は見つかるかもしれません。）

Comments

[nnn24]

ご回答いただき、ありがとうございます。
val()についてそのような仕様になってるのですね。勉強になりました。

切り替えてもっと別の手段で検討します。ありがとうございました。