JavaScript

フォーム項目の表示・非表示を切り替える【JavaScript】

この記事では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の判別によって、項目ごと非表示にすることもできます。

様々な応用が可能になりますので、ぜひ色々試してみてください。

フォームの制作には無料で作成できる「formrun」もおすすめです。

簡単にデザイン性の高いフォームが作成できます。スパム対策や、サイト埋め込みも可能なのでとても便利です。

(このサイトの問い合わせフォームでも利用しています。)


ウェブつくを支えてくれるスポンサー

  • この記事を書いた人
ウェブつく管理人

ウェブつく管理人

WEB制作の仕事をしています。より簡潔に、より分かりやすく解説していきたいと思い、サイトを運営しています。「読むのが苦にならないサイト」を目指しています。よろしくお願いします。

-JavaScript
-

© 2020 ウェブつく Powered by AFFINGER5