プログラミング言語や環境設定を中心としたパソコン関連の技術メモです。
主にシステム開発中に調べたことをメモしています。TIPS的な位置付けで、気が向いたときにちまちま更新していきます。
jQuery、チェックボックスを一括でon/offする方法
jQueryさんを使ってチェックボックスを一括でon/offする方法です。
やり方自体は色々ありますが、個人的にはclassを指定する形が好き。
いろいろ融通が利くので偶数行だけチェックとか応用が利きますしね。
nameやidに左右されないのもお気に入りポイントです。

コードは例えばこんな感じφ(--)

  <script type="text/javascript">
      $(document).ready(function() {
          // 「全選択」リンク押下時
          $('#all_select').click(function(e) {
              $('.target').each(function() {
                      $(this).attr("checked", "checked");
              });
          });
  
          // 「全選択解除」リンク押下時
          $('#all_deselect').click(function(e) {
              $('.target').each(function() {
                      $(this).removeAttr('checked');
              });
          });
  
      });
  </script>
  
  <a href="javascript:void(0)" id="all_select">全選択</a> 
  <a href="javascript:void(0)" id="all_deselect">全選択解除</a> 
  
  <input type="checkbox" name="hoge[]" class="target" value="1" />
  <input type="checkbox" name="hoge[]" class="target" value="2" />
  <input type="checkbox" name="hoge[]" class="target" value="3" />
  <input type="checkbox" name="hoge[]" class="target" value="4" />
  <input type="checkbox" name="hoge[]" class="target" value="5" />
スポンサーリンク
 
このエントリーをはてなブックマークに追加 

category:● JavaScript  thema:パソコンな日々 - genre:コンピュータ  Posted by ササキマコト 

  関連記事