スクリプトでcheckboxの一括選択/解除

Playでページ作っていく際に
テーブルの中にある複数のチェックボックスを一括で選択/解除できるチェックボックスが欲しいなー
って事で
意外とテーブルの中なんかで起こりやすい「一つのformタグにまとめられない状況」の例が見当たらなかったのでこれ幸いにとメモメモφ(・ω・ )

checkbox一括選択/解除

なおjQuery使います. var. 1.9.0

といってもたいしたコードでもないのでさくっと

function allHoge{
    $(".childHoge").prop("checked", $("#parentHoge").is(":checked")));
}

一行でしたorz
parentHogeを全選択/解除のキーとなるチェックボックスやボタンに id として設定.
childHogeを上に影響されるチェックボックス全てに class として設定
もちろん名前は適当なのでお好みで
最後にparentHogeを設定した同じところにでも

onclick="allHoge()"

と設定してやるとOK.
ボタンかチェックボックスか全選択/解除をクリックするごとに
childHogeと設定したチェックボックスが切り替わる.

以下簡単に内容

$("#parentHoge").is(":checked")

jQueryの is( )メソッド.
引数内の要素を持っているか否かでtrue か falseを返す.
この場合は

:checked

を持っているか否か, すなわちチェックされているか否かをtrue/falseで取得する.
ここで全選択/解除のどちらが選ばれたかを取得する

$(".childHoge").prop("checked", true/false);

ちょっと置き換えて見やすく(?)
jQueryの prop()メソッド
引数内のマップで操作を行なう
この場合は checked要素の値を true/falseに変更する
という操作
これを組み合わせて
「子に指定したチェックボックスのチェック状態を親に指定したチェックボックスの状態と同じものに切り替える」
となる

ただこの .prop
似たようなものに .attrというものがある.
こちらを使うと最初の1回だけ同じように動いてくれるが, 2回目以降は全選択ができなくなる.
おそらくだがHTML上だけ書き換えてプロパティとしては反映されていない感じ
何というトラップ・・・('A`)

こことか参考になるかと








雪やまないかなぁ・・・('A`)