【HTML/Javascript】「すべてチェック」機能を一行で実装【jQuery未使用】
よく、チェックボックスがたくさんあるWebサイトとかだと、「すべてのチェックボックスをチェック」したり、逆に一括でチェックを外す機能があったりします。
筆者も、職業柄、何回もその場面に出くわすのですが、そのたびにコードを書き直すのも面倒なので、テンプレ的に備忘録として残す事にしました。
一行で、「すべてチェック」機能を実装するためのサンプルコードです。
<input type='checkbox' name='checkbox[]' />のように、nameに「[]」などの無駄な装飾が付いている場合でも対応できます。
筆者も、職業柄、何回もその場面に出くわすのですが、そのたびにコードを書き直すのも面倒なので、テンプレ的に備忘録として残す事にしました。
一行で、「すべてチェック」機能を実装するためのサンプルコードです。
<input type='checkbox' name='checkbox[]' />のように、nameに「[]」などの無駄な装飾が付いている場合でも対応できます。
<label><input type="checkbox" value="" onclick="var tmp = document.getElementsByName('checkbox[]'); for(var i = 0; i < tmp.length; i++){if(this.checked){tmp[i].checked = 'checked';}else{tmp[i].checked = '';}">すべてチェック</label>
・・・まあ、もうちょっと短縮化できるかもしれませんが、こんなもんでしょう。
この記事の最終更新日：2019/07/31
最初に記事を書いた日：2019/07/31
インターネット黎明期から運営している生きる化石、Meteoric Streamへようこそ！
