【JavaScript】チェックボックスの「その他」選択で入力欄を表示する

こんにちは、ryohei(@ityryohei)です!

本記事では、JavaScriptでチェックボックスの「その他」を選択した際にテキストフィールドの入力欄を表示する方法をご紹介しています。

JavaScriptでチェックボックスの「その他」を選択したときに入力欄を表示したいな。良い方法ないかな?

上記の疑問にお答えします。

では、解説していきます。

本記事で作成するもの

チェックボックスの「その他」が選択された場合にその他の内容を入力するテキストフィールドを表示します。下記にデモを用意していますので、動画をご確認ください。

See the Pen 7440 by ryohei (@intotheprogram) on CodePen.

上記デモでは、テキストフィールドの表示・非表示の切り替えには要素のstyleプロパティを使用しています。classの追加・削除などでも実装できますので好みで変更してください。

チェックボックスの「その他」選択で入力欄を表示する

デモと同様にチェックボックスの「その他」を選択した際に入力欄を表示する処理を作成します。テキストフィールドは読み込み時は非表示にしておきたいため、CSSでdisplay: noneを指定します。JavaScriptでは、チェックボックスの「その他」がクリックされた場合にcheckedの状態を確認し、trueであればその他の入力欄を表示するようにします。

HTML

<form>
    <label>
        <input type="checkbox" name="framework[]" value="Angular">Angular
    </label>
    <label>
        <input type="checkbox" name="framework[]" value="React.js">React.js
    </label>
    <label>
        <input type="checkbox" name="framework[]" value="Vue.js">Vue.js
    </label>
    <label>
        <input id="other" type="checkbox" name="framework[]" value="その他">その他
    </label>
    <input id="text" type="text" name="other" value="" placeholder="その他入力欄">
</form>

CSS

#text {
    display: none;
}

JavaScript

const myFunc = ()=>{
    const text = document.querySelector('#text');
    const other = document.querySelector('#other');

    other.addEventListener('click', (e)=>{
        if(e.target.checked){
            text.style.display = 'block';

        } else {
            text.style.display = 'none';
        }
    }, false);
};
myFunc();

これでチェックボックスの「その他」が選択された場合にその他を内容を入力するテキストフィールドを表示することができます。

最後に

チェックボックスの「その他」はアンケートフォーム等で取り入れることが多い選択肢です。「その他」と「その他入力欄」はセットで使われることが多いですが、「その他」が選択されなければ「その他入力欄」は必要がない項目です。「その他」が選択された場合に「その他入力欄」を表示させる方が見た目においてすっきりしますので、フォームを構築される場合に取り入れてみてくださいね。

以上、JavaScriptでチェックボックスの「その他」選択で入力欄を表示する方法のご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

おすすめの書籍

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら