そして伝説になりたかった

働きたくない男の雑記・備忘録

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

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

カテゴリー: 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>

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

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

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

よく見られている記事

おすすめの記事

管理人について

高専へ入学するがプログラミングが嫌いという理由で機械科を選択。その後勉強が嫌いという理由で高専退学。グラフィックデザインの仕事ができると騙され20歳からweb業界へ就職するも、大嫌いなプログラミングをさせられ続ける毎日が待っていた。未だにプログラミング地獄から脱出できないでいる。

その他管理人についてはこちら
プロフィールとか


コメントを残す