読者です 読者をやめる 読者になる 読者になる

ほんじゃら堂

めんどくさい仕事をラクにする作業自動化レシピ集

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

IT系・技術系 jquery Javascript


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とはちょっと書き方がちがうけど、
何だかなじめそう。