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

こんにちは、Ryohei（@ityryohei）です！

本記事では、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でチェックボックスの「その他」選択で入力欄を表示する方法のご紹介でした！