ほんじゃらねっと

ダイエット中プログラマのブログ

jQueryでテーブルのチェックボックスを一括選択するチェックボックスを作成する


Djangoを使う時はJavascriptライブラリにjQueryを使うのが流行らしい。
jQueryは最近注目されている楽しいライブラリのようなので、以前prototype.js
実装した、チェックボックス一括チェック処理を書き換えてみる。

<script type="text/javascript" src="/static/javascripts/jquery-1.1.3.1.pack.js"></script>
<script type="text/javascript">
  <!--//
      $(function() {
          $("#check_ctrl").click(function() {
              if ($("#check_ctrl").attr("checked")) {
                  $(".model_id").attr("checked", true);
              } else {
                  $(".model_id").attr("checked", false);
              }
              //return false;
          });
      });
      //-->
</script>
<form action="sample" method="POST">
<table>
<tr>
<th style="text-align: center;"><input id="check_ctrl" type="checkbox" /></th>
<th>タイトル</th>
<th>詳細</th>
</tr>
{% for model in models %}
<tr>
<td style="text-align: center;"><input type="checkbox" name="id" class="model_id" value="{{ model.id }}" /></td>
<td>{{ model.title }}</td>
<td>
<input type="button" value="修正" onclick="location.href='/model/edit/{{ model.id }}';" />
</td>
</tr>
{% endfor %}
</table>


おおー、prototype.jsとはちょっと書き方がちがうけど、
何だかなじめそう。