• HOME > 
  • JavaScript > 
  • JSでチェックボックスの全選択全解除を行う方法【すべて選択】

JSでチェックボックスの全選択全解除を行う方法【すべて選択】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像
広告
広告

ワンクリックでチェックボックスの全選択や全解除をできるようにする

フォームのチェックボックスの数が多いときにあると便利な、ワンクリックで全選択や全解除できる機能をJavaScriptで作る機会があったので、その方法を備忘録として残しておきます。

実装したのは、「すべて選択」にチェックを入れると、文字通りすべてのチェックボックスにチェックが入り、反対に「すべて選択」のチェックを外すと、すべてのチェックボックスのチェックが外れるという仕様です。

完成イメージは以下の通りです。

JSによるチェックボックスの全選択全解除のイメージ

サンプルコード

先ほどのサンプルのソースコードを記載します(不具合がない保証はできませんのでご容赦ください)。

HTMLの例

まずはHTMLです。

5行目フォームのパーツとは切り離して、全選択(全解除)用のチェックボックスを用意しています。

この要素にonchange属性を設定し、ユーザーがチェックを入れたり外したりするたびにJavaScriptによる処理が発火するようにします。引数に「this.checked」を指定することでチェック状態(true/false)を関数に渡してます。

9行目フォーム内のチェックボックスに関しては特別なことはせず、通常のチェックボックスを並べているだけです。

HTML

<div id="test">
    <ul>
        <li>
            <label>
                <input type="checkbox" onchange="checkClear(this.checked)">すべて選択
            </label>
        </li>
    </ul>
    <form method="post" action="">
    <ul>
        <li>
            <label>
                <input type="checkbox" name="myCheck" value="">東京都
            </label>
        </li>
        <li>
            <label>
                <input type="checkbox" name="myCheck" value="">埼玉県
            </label>
        </li>
        <li>
            <label>
                <input type="checkbox" name="myCheck" value="">千葉県
            </label>
        </li>
        <li>
            <label>
                <input type="checkbox" name="myCheck" value="">神奈川県
            </label>
        </li>
        <li>
            <label>
                <input type="checkbox" name="myCheck" value="">茨城県
            </label>
        </li>
        <li>
            <label>
                <input type="checkbox" name="myCheck" value="">栃木県
            </label>
        </li>
        <li>
            <label>
                <input type="checkbox" name="myCheck" value="">群馬県
            </label>
        </li>
    </ul>
    </form>
</div><!--end test-->

JavaScriptの例

続いてはJavaScriptのソースコードです。

HTML側で用意したonchange属性によって発火する関数を作成します。

1行目引数「checked」は全選択用チェックボックスのチェック状態を「true」か「false」で受け取ります。

2行目JSで操作するチェックボックスをセレクターで指定します。

3行目全選択用チェックボックスのチェック状態に応じた条件分岐で処理を書きます。「true」は全選択のチェックを入れた時なので全選択にする処理、「false」は全選択のチェックを外したタイミングなのですべてのチェックを外す処理を用意します。

4行目チェックボックスの個数分ループを使います。「n」個目のチェックボックスの「checked」を「true」に設定することでチェック状態にできます。

6行目最後に、全選択のチェックを外した時の処理(すべてのチェックを外す)も用意します。4行目と同様にループを使い、今度は「checked」を「false」にしてチェックを外すようにしています。

JavaScript

function checkClear(checked){
    var checkbox =document.querySelectorAll('input[name="myCheck"]');
    if(checked === true){
        for(var n = 0; n < checkbox.length; n++){
            checkbox[n].checked = true;
        }//end for
    }else if(checked === false){
        for(var n = 0; n > checkbox.length; n++){
            checkbox[n].checked = false;
        }//end for
    }//end if
}

まとめ

以上が、JavaScriptでチェックボックスの全選択全解除を行う方法です。

数個だけのチェックボックスであれば一つ一つチェックを入れていっても負担にはなりませんが、チェックボックスが何十個もあり、全部にチェックが入る可能性があるのであれば「すべて選択」ボタンを用意しておいた方がユーザビリティが高まります。

広告
広告

関連する記事

サムネイル

JSで入力値が英数字や半角かどうか即時文字チェックする【ma……

2024年10月02日
JavaScriptのmatch()は、正規表現を使って対象の文字列の中に一致するものがあるか検索できるメソッドです。このページではテキストボックスに入力された文字が数字や半角かどうかチェックする機能をmatchメソッドを使って実装する方法ついてご紹介します。
サムネイル

JSでHTMLのデータ属性を取得・更新する方法【datase……

2024年10月02日
JavaScriptのdatasetで要素のdata属性を操作する JavaScriptのdatasetは、HTML要素に設定されたデータ属性(data-*** […]
サムネイル

JavaScriptでラジオボタンの値(value)を取得す……

2024年10月02日
JSでラジオボタンの値を取得・操作する JavaScriptによるラジオボタンの操作(値の取得やチェックの切り替え)の方法を備忘録として残しておきます。 JSで […]
サムネイル

JSで大文字から小文字(小文字から大文字)へ変換する方法

2024年10月02日
JavaScriptで大文字と小文字を変換する JavaScriptを使った文字検索フォームを作るにあたり、大文字小文字どちらで入力されても良いよう、変換処理を […]
サムネイル

JSのclassList.toggleでクラスの付け外しを行……

2024年09月04日
classList.toggleとは? まず「classList」とは要素のクラス属性の情報を参照するプロパティで、「classList.add()」や「cla […]
サムネイル

JSで要素が特定のクラスを持つか調べる【classList.……

2024年09月04日
JSで要素が特定のクラスを持つか調べるには? JavaScriptで要素が特定のクラスを持つか調べるには「classList.contains」を使います。 「 […]
サムネイル

JSで文字列の中の任意の位置に別の文字を挿入する【slice……

2024年09月04日
JavaScriptに文字列の中の任意の位置に別の文字を挿入するにはslice()メソッドを利用します。sliceは特定の文字列の任意の位置から任意の文字数分を切り出すメソッドで、これを使って対象の文字列を一旦分解し、挿入したい文字と一緒新しい文字列としてくっつけ直します。