久々のjQuery：checkboxの扱い方、eachとmapの違い、など

久々にjQuery使ったら、指が止まった。
ので、適当にメモ。

◆checkboxの扱い方

// チェックボックス要素を取得
$( "input:checkbox" )
//チェックされたチェックボックスを取得
$( "input:checkbox:checked" ) 

// チェックボックスを全てチェックする
$( "input:checkbox" ).attr( { checked: "checked" } );
// チェックボックスのチェックを全て外す
$( "input:checkbox" ).attr( { checked: "" } );

//チェックされたチェックボックスの値のリスト
$( "input:checked" ).map( function() {
  return $(this).val();
}).get().join(",");

◆mapとeachの違いは？

jQueryは常に配列を扱う感覚。
配列を一括で操作する場合は、ピリオド（.）で関数をつなげればOK。
配列内の要素について、一つ一つ操作する場合は「each」か「map」を使う。

両方とも、配列内の各要素をループする感じ。
違いを自分の解釈で言えば、

• each：元の配列を操作する。
• map：元の配列を操作して、新しい配列を返す。

上の例で言えば、最初に出来る配列にはcheckbox要素そのものが入ってます。なのでmapを使って、各チェックボックスの値を返すことで、値の配列が出来るわけですね。

面白いことに、returnの挙動も違います。

• eachの場合、return falseでループが終了。
• mapの場合、何もreturnしないと配列に入らない。

◆formとfunctionの名前が同じ

関数が見つからない、といって怒られました。

<script language="javascript" type="text/javascript">
function do_this() {
    $( ".do_this" ).val();
}
</script> 
<form name="do_this" action="do_this.php" method="post">
...

FireFox 3、Chrome 4で確認。