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>