今回はまぁツイートの内容以上でも以下でもない感じだが、一応。

たとえば、以下のような HTML があるとする。

<input type="checkbox" name="hoge" value="1"> 1</li>
<input type="checkbox" name="hoge" value="2"> 2</li>
<input type="checkbox" name="hoge" value="3"> 3</li>

これを submit されたフォームデータではなく、jQuery を使ってフロントエンドで取得したい場合、ちょっとした小細工が必要になる。以下はうまくいかない例。

var checkedValues = $('input[type="checkbox"]:checked').val();

理由は明白というか、.val() はセレクタに合致した最初の要素の値しか返さないからだ。ではどうするか。まず思いつくであろう方法は、.each() を使って順に追加か。

var checkedValues = [];
$('input[type="checkbox"]:checked').each(function() {
    checkedValues.push($(this).val());
});

これでもいいが、ツイートに書いた以下の方法のほうがなんとなくスマートな気がする。

var checkedValues = $('input[type="checkbox"]:checked').map(function() {
    return $(this).val();
}).get(); 

つまり、jQuery の .map() を使って配列を作成する方法。この場合、コールバック関数が各々の要素の値を返して順に配列に追加してくれるため、先に配列を初期化しておく必要がない。ただしというか、.map() の返り値は jQuery が持つエレメントの配列になるので、最終的に .get() を使って標準スタイルの配列にアクセスするのがベター。