Windowsソフト、iPhoneアプリ、ゲーム音楽素材の「Meteoric Stream」 -> 資料室 -> Javascript/ActionScript/HTML/FLASH -> 【HTML/Javascript】「すべてチェック」機能を一行で実装【jQuery未使用】

【HTML/Javascript】「すべてチェック」機能を一行で実装【jQuery未使用】

よく、チェックボックスがたくさんあるWebサイトとかだと、「すべてのチェックボックスをチェック」したり、逆に一括でチェックを外す機能があったりします。

筆者も、職業柄、何回もその場面に出くわすのですが、そのたびにコードを書き直すのも面倒なので、テンプレ的に備忘録として残す事にしました。

一行で、「すべてチェック」機能を実装するためのサンプルコードです。
<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

この記事をシェアする

このエントリーをはてなブックマークに追加
縺雁ー城▲縺遞シ縺弱↑繧峨昴う繝ウ繝医し繧、繝GetMoney!

関連記事

資料室のトップに戻る
Windowsソフト、iPhoneアプリ、ゲーム音楽素材の「Meteoric Stream」 -> 資料室 -> Javascript/ActionScript/HTML/FLASH -> 【HTML/Javascript】「すべてチェック」機能を一行で実装【jQuery未使用】
▲Top English