表示、非表示を切り替える方法

スタイルシートで要素の非表示にするには、次のように書きます。

display:none;

これをJavaScriptで制御するには
表示

elem.style.display = "";

非表示

elem.style.display = "none";

となります。

ただしこの方法は、タグにstyle属性で直接かかれたもののみが制御できます。
classやidを使用したスタイルの制御はできません。

onClickで表示、非表示

リンクタグをクリックすることで表示、非表示を切り替えるには次のようになります。

表示 / 非表示

ここを表示する

<p>
  <a href="#" onClick="toggle_view1();return false;">表示</a>
/ <a href="#" onClick="toggle_hidden1();return false;">非表示</a>
</p>
<div id="area_hoge1">
  <p>ここを表示する</p>
</div>

<script language="JavaScript" type="text/javascript">
<!--
var elem1 = document.getElementById("area_hoge1");
function toggle_view1() {
  elem1.style.display = "";
}
function toggle_hidden1() {
  elem1.style.display = "none";
}
-->
</script>
これだと表示しているときも、非表示にしているときも両方のリンクが出ているので、 少し工夫して表示しているときには「非表示」のリンクだけ、非表示にしているときは「表示」のリンクだけを表示するようにするには、リンクタグもJavaScriptで表示、非表示にします。

非表示

ここを表示する

<p>
  <a href="#" id="link_view2" onClick="toggle_view2();return false;" style="display:none;">表示</a>
  <a href="#" id="link_hidden2" onClick="toggle_hidden2();return false;">非表示</a>
</p>
<div id="area_hoge2">
  <p>ここを表示する</p>
</div>

<script language="JavaScript" type="text/javascript">
<!--
var elem2_1 = document.getElementById("area_hoge2");
var elem2_2 = document.getElementById("link_view2");
var elem2_3 = document.getElementById("link_hidden2");
function toggle_view2() {
  elem2_1.style.display = "";
  elem2_2.style.display = "none";
  elem2_3.style.display = "";
}
function toggle_hidden2() {
  elem2_1.style.display = "none";
  elem2_2.style.display = "";
  elem2_3.style.display = "none";
}
-->
</script>

radioボタンで表示、非表示

/

ここを表示する

<form name="form3" action="#" method="POST">
<p>
  <label for="hoge3_1" onClick='view_ch3();'>
    <input type="radio" name="hoge3" id="hoge3_1" value="1" checked="checked" onChange="view_ch3();"> 表示
  </label>
/
  <label for="hoge3_0" onClick='view_ch3();'>
    <input type="radio" name="hoge3" id="hoge3_0" value="0" onChange="view_ch3();"> 非表示
  </label>
</p>
</form>
<div id="area_hoge3">
  <p>ここを表示する</p>
</div>

<script language="JavaScript" type="text/javascript">
<!--
function view_ch3() {
  var elem3 = document.getElementById("area_hoge3");

  var i;
  if (document.form3.hoge3.length) {
    for (i = 0; i < document.form3.hoge3.length; i++) {
      if (document.form3.hoge3[i].checked) {
        if(document.form3.hoge3[i].value == 0){
          elem3.style.display = "none";
        }else {
          elem3.style.display = "";
        }
      }
    }
  } else {
    if (document.form3.hoge3.checked) {
      if(document.form3.hoge3.value == 0){
        elem3.style.display = "none";
      }else {
        elem3.style.display = "";
      }
    }
  }
}
-->
</script>

radioボタンが複数種類あったときに汎用性を持たせると次のようになります。

表示 非表示

ここを表示する

表示 非表示

ここを表示する

<form name="form4" action="#" method="POST">
<p>
<input type="radio" name="hoge4_1" value="1" onClick="view_ch('hoge4_1')" checked="checked" /> 表示
<input type="radio" name="hoge4_1" value="0" onClick="view_ch('hoge4_1')" /> 非表示
</p>
<div id="area_hoge4_1">
  <p>ここを表示する</p>
</div>
<p>
<input type="radio" name="hoge4_2" value="1" onClick="view_ch('hoge4_2')" checked="checked" /> 表示
<input type="radio" name="hoge4_2" value="0" onClick="view_ch('hoge4_2')" /> 非表示
</p>
<div id="area_hoge4_2">
  <p>ここを表示する</p>
</div>
</form>

<script language="JavaScript" type="text/javascript">
<!--
function view_ch(elemid) {
  var elem4 = document.getElementById('area_' + elemid);
  form_elem4 = document.form4.elements[elemid];

  var i;
  if (form_elem4.length) {
    for (i = 0; i < form_elem4.length; i++) {
      if (form_elem4[i].checked) {
        if(form_elem4[i].value == 1){
          elem4.style.display = "";
        }else {
          elem4.style.display = "none";
        }
      }
    }
  } else {
    if (form_elem4.checked) {
      if(form_elem4.value == 1){
        elem4.style.display = "";
      }else {
        elem4.style.display = "none";
      }
    }
  }
}
-->
</script>

関連記事

スポンサーリンク

CASE演算子 値の変換

ホームページ製作・web系アプリ系の製作案件募集中です。

上に戻る