【jQuery】チェックボックスの「すべて選択」「すべて解除」（セレクタの属性の記述方法）

Tweet

Category JavaScript / Tagged jQuery 2010/01/15

jQueryのセレクタで、属性の指定方法はこう。

[attribute]  指定された属性を持つ要素を選択する。
[attribute=value]   属性が指定された値を持つ要素を選択する。
[attribute!=value]  属性が指定された値を持たない要素を選択する。
[attribute^=value]  属性値が指定された文字列から始まる要素を選択する。
[attribute$=value]  属性値が指定された文字列で終わる要素を選択する。
[attribute*=value]  属性値が指定された文字列を含む要素を選択する。
[selector1][selector2]...[selectorN]  複数の属性フィルタを指定し、全てを満たす要素を選択する。

ちょっと古い情報にあたってしまうと、こんなふうに書いてあることがあり、残念なことになる場合があります（jQuery1.2以前の情報）。

[@attribute=value]

↓↓エラー発生

'Syntax error, unrecognized expression: [@type=checkbox]' when calling method: ..... '

1.3以降では@は不要です。 [type=’checkbox’] でよいです。

おまけ

jQueryで、一覧表の中で全選択、全解除をやってみます。

<table>
 <tbody>
  <tr>
   <th><input type="checkbox" onclick="$(this.parentNode.parentNode.parentNode).find('input[type=\'checkbox\']').attr('checked', this.checked)" /></th>
   <th>氏名</th>
   <th>年齢</th>
  </tr>
  <tr><td><input type="checkbox" name="id[]" value="1" /></td><td>佐藤</td><td>20</td></tr>
  <tr><td><input type="checkbox" name="id[]" value="2" /></td><td>加藤</td><td>30</td></tr>
  <tr><td><input type="checkbox" name="id[]" value="3" /></td><td>田中</td><td>40</td></tr>
  <tr><td><input type="checkbox" name="id[]" value="4" /></td><td>山田</td><td>50</td></tr>
  <tr><td><input type="checkbox" name="id[]" value="5" /></td><td>高橋</td><td>60</td></tr>
 </tbody>
</table>

動作サンプル