ラジオボタンの選択で表示/非表示を切り替えるフォームを1ページに複数設置したい

Question

はじめまして。どうぞよろしくお願いします。

以下のような、フォームのラジオボタンにチェックを入れることで
要素の表示/非表示を切り替えるスクリプトを1ページ内に複数
設置したいのですが、可能でしょうか?

<script type="text/javascript">
function jsselect1(){
radio = document.getElementsByName('selectbox') 
if(radio[0].checked) {

document.getElementById('box01').style.display = "";
document.getElementById('box02').style.display = "none";
}else if(radio[1].checked) {

document.getElementById('box01').style.display = "none";
document.getElementById('box02').style.display = "";
}
}

window.onload = jsselect1;
</script>

<ul>
<li><label><input type="radio" name="selectbox" value="選択肢1" onclick="jsselect1();" checked="checked" />選択肢1</label></li>
<li><label><input type="radio" name="selectbox" value="選択肢2" onclick="jsselect1();" />選択肢2</label></li>
</ul>

<div id="box01">
選択肢1の内容
</div>

<div id="box02">
選択肢2の内容
</div>

1つのページにこのようなフォームを3つ、
1つのフォームにつき【選択肢1】【選択肢2】があり
いずれも【選択肢1】が表示されている状態になるのが望ましいです。
初心者のため質問の仕方にも満足でない部分もあるかと存じますが
どうぞよろしくお願いいたします。

Comments

[yambejp]

「1つのページにこのようなフォームを3つ」とありますが、フォーム同士が連動する必要はなくそれぞれのフォームが別々の場所のエリアの表示を切り替えるということでよろしいですね？

[kei344]

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

[fujii0411]

すみません、どこが詰まっているのか、上記の質問以外に表現できませんでした…以後は気を付けます。

Answer 1

たとえばこんな感じ

HTMLElement.prototype.trigger=function(eventStr){
  if (document.createEvent) {
    var e = document.createEvent("HTMLEvents");
    e.initEvent(eventStr, true, true );
    return this.dispatchEvent(e);
  } else {
    var e = document.createEventObject();
    return this.fireEvent("on"+eventStr, e);
  }
};
window.addEventListener('DOMContentLoaded', function(e){
  Array.prototype.forEach.call(document.querySelectorAll('[data-target]'),function(x){
    x.addEventListener('change',function(e){
      Array.prototype.forEach.call(document.querySelectorAll('[name='+e.target.getAttribute("name")+']'),function(y){
        document.querySelector('#'+y.getAttribute('data-target')).style.display=(y.checked?"block":"none");
      });
    });
    x.trigger("change");
  });
});

<label><input type="radio" name="r1" value="選択肢1" data-target="box01" checked>選択肢1</label>
<label><input type="radio" name="r1" value="選択肢2" data-target="box02">選択肢2</label><br>
<div id="box01">選択肢1の内容</div>
<div id="box02">選択肢2の内容</div>
<hr>
<label><input type="radio" name="r2" value="選択肢1" data-target="box03" checked>選択肢1</label>
<label><input type="radio" name="r2" value="選択肢2" data-target="box04">選択肢2</label><br>
<div id="box03">選択肢1の内容</div>
<div id="box04">選択肢2の内容</div>
<hr>
<label><input type="radio" name="r3" value="選択肢1" data-target="box05" checked>選択肢1</label>
<label><input type="radio" name="r3" value="選択肢2" data-target="box06">選択肢2</label><br>
<div id="box05">選択肢1の内容</div>
<div id="box06">選択肢2の内容</div>

Comments

[fujii0411]

ありがとうございます!理想通りの動きです!