jQuery 全部チェックする 全部チェックを外す

Ajax

jQuery 全部チェックする 全部チェックを外す

チェックボックスを利用するフォームでは、当てはまる項目が多い場合は、手で全部選択するのは面倒ですよね?
また、選択した後に、「あ、違った!」ということで、全部外すのも面倒ですよね?

jQueryを利用して「全選択」・「選択を外す」ができます。
下記にサンプルを載せておきます。

 /**
  * Javascript 全てのチェックボックスをチェック・解除する
  */
 //全てのチェックボックスをチェック
     $(function(){
        $("#toggle").click(function(){
             $('.chkbox').attr('checked', $(this).attr('checked'));
             $('#toggleoff').removeAttr('checked', $(this).attr('checked'));
         });
    });
 
 //全てのチェックボックスのチェックを解除
     $(function(){
        $("#toggleoff").click(function(){
            $('.chkbox').removeAttr('checked', $(this).attr('checked'));
            $('#toggle').removeAttr('checked', $(this).attr('checked'));
         });
     });
 <!--HTML-->
 <input class="chkbox" type="checkbox" name="fruit" value="みかん">
 <input class="chkbox" type="checkbox" name="fruit" value="りんご">
 <input id="toggle" type="checkbox"> すべて選択する<br>
 <input id="toggleoff" type="checkbox"> 選択を解除<br>
 
カテゴリーAjax

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です