ほんじゃら堂

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

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

これもまた、とりあえず動くレベル。
prototype.jsを使っている。Djangoのテンプレートだが、あまり関係なし。

<script type="text/javascript" src="/static/javascripts/prototype.js"></script>
<script type="text/javascript">
  <!--//
      Scripts = function() {
          return {
              init : function() {
                  Event.observe("check_ctrl", "click", Scripts.toggleChecks);
              },
              toggleChecks : function() {
                  checkList = $A(document.getElementsByClassName("model_id"));
                  if ($F("check_ctrl") == "on") {
                      checkList.each(function(check) {
                          check.checked = true;
                      });
                  } else {
                      checkList.each(function(check) {
                          check.checked = false;
                      });
                  }
              }
          };
      }();
      Event.observe(window, "load", Scripts.init, 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>


Javascriptは一度作成したことのある処理でも
なぜか毎回苦労して調べている気がする。
こうやって記録しておく事が必要だったのだな。