2010年5月20日木曜日

久々の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で確認。

1 件のコメント:

匿名 さんのコメント...

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

↑上記は間違ってませんか?。正しくは

$("input:checkbox").removeAttr("checked");

チェックボックスに値無しの"checked"属性を追加してもチェックされるので逆に全てチェックされてしまうと思います。