【javascript】チェックボックスで、特定の選択肢が選択された場合に、別の項目を表示する方法

問い合わせフォームなどで、選択肢に応じてお問合せ項目を変更したい場合があるかと思いますが、今回の方法は、最初にチェックボックスで選ばせた内容によって、項目を変更する方法です。ユーザビリティを考えた上で、必要不可欠な機能で、集客やサイトの動線を最適化するのに有効な手段です。簡単な記載のjavascriptではありますが、使い所が様々ある万能なコードです。どなたかのプログラミングの参考になれば幸いでございます。

コード紹介

【html側】

<div class="c3">
<label>
<input id="wide1" type="checkbox" name="お問合せ" value="WEBデザイナーのためのjavascript" tabindex="12" onchange="myfunc(this.value)"/>WEBデザイナーのためのjavascript</label>
</div>

<p id="hidden1"><span class="C1">プログラミング言語</span>
<select name="プログラミング言語" id="myselectbox">
<option value="python"　selected>python</option>							<option value="php">php</option>				
<option value="javascript">javascript</option>   
</select>
</p>

【Javascript側】

<script>
document.getElementById("hidden1").style.display ="none";
function myfunc(value) {
  var check1 = document.getElementById("wide1").checked;
  var hidden1 = document.getElementById("hidden1");
  if(check1 == true){
     hidden1.style.display ="block";
     }
  else{
    hidden1.style.display ="none";
  }
}
</script>

フォーム部での処理で、チェックボックスにonchange 属性を設置し、クリックした後に出現させる項目の「プログラミング言語」はid=”hidden1″で最初、非表示にしておきます。

続くjavascriptのコードで、id=”wide1″にチェックが入った場合に、スタイルの変更によって表示・非表示を切り替えています。

まとめ

javascriptを理解する基本の簡単なコードですが、静的なページをユーザーのために使い勝手も良くするには欠かせないコードです。初めてWEBデザイナーとして活躍する方も、覚えておいて損はない手段ですので、是非場面によって応用して使ってみてはいかがでしょうか。