【JavaScript】チェックボックスの「その他」選択で入力欄を表示する
※本ページのリンクにはプロモーションが含まれています。

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

JavaScriptでチェックボックスの「その他」を選択したときに入力欄を表示したいな。良い方法ないかな?
上記の疑問にお答えします。
では、解説していきます。本記事で作成するもの
チェックボックスの「その他」が選択された場合にその他の内容を入力するテキストフィールドを表示します。下記にデモを用意していますので、動画をご確認ください。
上記デモでは、テキストフィールドの表示・非表示の切り替えには要素の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入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。