【コピペでOK】チェックボックスをグループで入力必須にする

投稿日：2020/2/12　最終更新日:2020/05/12　閲覧数：13.4K

カテゴリー：システム・WEB>

こんにちは。
html5にありそうで無い「1つ以上選択してください」の処理です。

必須にしたいグループが別々に複数あるとき＝処理が複数あるとき

でも、jsの編集をしなくても良いように作っています。
そのときはname値をいい感じに調整して使用してください。

cssはご自身でいい感じにしてください。

html

【コピペでOK】その他にチェックを入れたらテキスト入力を有効化、必須にする

タグ：#html#jquery#js#コピペ#チェックボックス#フォーム

HTML部分はこちらの記事と同じです。
なのでjs部分を追記すれば一緒に動くようになっています。

グループ判定用のチェックボックスを用意して入力必須に設定。
このチェックボックスをjsで操作することで、「1つ以上選択してください」を実装します。


<p>
    <!--グループ用チェックボックス-->
    <input type="checkbox" id="group_control" required><br>
    <label>1つ以上チェックをしてください</label>
</p>
<div>
    <p><input class="check" type="checkbox" name="group" id="group-01" value="犬"><label for="group-01">犬</label></p>
    <p><input class="check" type="checkbox" name="group" id="group-02" value="猫"><label for="group-02">猫</label></p>
    <p>
        <input class="check other" type="checkbox" name="group" id="group-03" value="その他"><label for="group-03">その他</label>
        <input type="text" name="group.other" required disabled></p>
</div>

次にjsです。

js

class=”check”のチェックボックスが切り替わることで発火
↓
クリックされた要素のname属性を取得
↓
同じname値のチェックボックスをカウント(ここでグループの判定をします)
↓
1個以上なら対応するIDのinputを有効化する

といったものです。

カウントと分岐を「length > 0」で行っているので、この数値を変えることで
「2つ以上選択してください」
や
「3つ以上選択してください」

も簡単に実装可能です。


<!-- jQueryの読み込み -->
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script>
    //====================
    //チェックボックス必須化
    //====================
    $(function() {
        //チェックしたら発火
        $('.check').change(function() {

            //選択したinputのname値を変数に格納
            var name = $(this).attr('name');

            //control用のIDを連結
            var control_name = name + '_control';
            var control_checkbox = document.getElementById( control_name );

            //チェックされているチェックボックスの数が0より多い場合
            if ($("input[name='" + name + "']:checked").length > 0) {
                //チェック有効
                control_checkbox.checked = true;
            } else {
                //チェック有効
                control_checkbox.checked = false;
            }
        });
    });
</script>

こちらも併せて参考にしてください。