この記事ではJavaScriptでフォームの項目の表示・非表示を切り替える方法を解説します。
この記事の目次
フォーム項目の制御に使うchecked・disabled
まずはフォームを作成する前に、必要な要素を知っておきましょう。
「checked」と「disabled」です。
checkedでチェックの有無を切り替え
checkedはチェックボックスやラジオボタンがチェックされているかを確認・制御します。
下記のようにchecked = true/falseのように使います。
// チェックを入れる
document.getElementById('ID').checked = true;
// チェックを外す
document.getElementById('ID').checked = false;trueでチェックを入れ、falseでチェックを外します。
disabledで表示非表示を切り替え
disabledはフォームやチェックボックス、ラジオボタンを入力不可にします。
下記のようにdisabled = true/falseのように使います。
// 入力不可にする
document.getElementById('ID').disabled = true;
// 入力可にする
document.getElementById('ID').disabled = false;trueで入力可に、falseで入力不可にします。
選択項目によって表示・非表示を切り替えるフォームを作ろう
checkedとdisabledを使って実際に、選択肢によって項目が切り替わるフォームを作ってみましょう。
デモ
「沖縄」を選んだときに、次の質問の回答を不可にするフォームです。
サンプルコード
function checkAnswer (radio) {
var rd_value = radio.value;
var q2 = document.getElementById('q2');
var q2_1 = document.getElementById('q2-1');
var q2_2 = document.getElementById('q2-2');
if (rd_value == 'okinawa') {
q2_1.checked = false;
q2_2.checked = false;
q2_1.disabled = true;
q2_2.disabled = true;
q2.style.color = '#999999';
} else {
q2.style.color = '#000000';
q2_1.disabled = false;
q2_2.disabled = false;
}
}<div id="q1">
<p>Q1.行きたい旅行先はどこですか？</p>
<label><input type="radio" name="q1" value="okinawa" onclick="checkAnswer(this)">沖縄</label>
<label><input type="radio" name="q1" value="hokkaido" onclick="checkAnswer(this)">北海道</label>
</div>
<div id="q2">
<p>Q2.Q1で「北海道」と答えた人に質問です。<br>北海道で食べたいものはなんですか？</p>
<label><input type="radio" name="q2" value="1" id="q2-1">うにいくら丼</label>
<label><input type="radio" name="q2" value="2" id="q2-2">スープカレー</label>
</div>
Q1で沖縄を選択すると、Q2の「チェック解除」「選択不可」「色をグレーに変更」が作動します。
以上、フォーム項目の表示・非表示を切り替える方法を解説しました。
同じように選択項目のtrue/falseの判別によって、項目ごと非表示にすることもできます。
様々な応用が可能になりますので、ぜひ色々試してみてください。
もおすすめです。