ラジオボタンのクリックでフォームの表示・非表示の切り替えを2つ配置したい

お世話になっております。

メールフォームでラジオボタンのクリックでフォームの表示・非表示の切り替えをしたいと考えています。
参考サイトを参考に改造しました。（下記のコード）
うまくいきましたが、2つ目も配置したいと思い、コピペして関数名の最後尾に2を入れましたが、
一つは動きましたが、2つ目は動かないのです。
どこが違うか、ご教鞭をお願い致します。

ラジオボタンのクリックでフォームの表示・非表示の切り替えを簡単に実装

head内に
<script>
  window.console = window.console || function(t) {};
</script>
<script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>

body内に
  <label>
  <input class="js-check" type="radio" name="rs" value="1" onclick="formSwitch()" >特にない
</label>

<label>
  <input class="js-check" type="radio" name="rs" value="1" onclick="formSwitch()">好きな音楽のジャンル
</label>

<span id="sample">
<div class="selecter">
  <select id="changeSelect" name="hoge">
    <option value="select1">ジャンルを選んでください</option>
    <option value="select2">ロック</option>
    <option value="select3">ジャズ</option>
    <option value="select4">ポップス</option>
    <option value="select5">クラシック</option>
    <option value="select6">ラテン</option>
   </select>
</div>
</span>

<script id="rendered-js" >
var selecterBox = document.getElementById('sample');
var selecter = document.getElementById('changeSelect');

selecterBox.style.display = "none";


function formSwitch() {
  check = document.getElementsByClassName('js-check');
  if (check[0].checked) {
    selecterBox.style.display = "none";
    selecter.selectedIndex = 0;

  } else if (check[1].checked) {
    selecterBox.style.display = "block";

  } else {
    selecterBox.style.display = "none";
  }
}
</script>

hatena19

2020/09/20 00:59

提示のコードには、2つ目が配置されてません。2つ目を配置して、うまく動かないコードを提示してください。また、ラジオボタンで表示/非表示を切り替えるなら、JSなしでCSSだけで可能ですが、この方法の提案でもOKですか。

kmyr

2020/09/20 04:04

ありがとうございます。 yambejp様の提案で出来ました。

行動規範の内容に同意します

回答1件

ベストアンサー

表示・非表示だけならhtml構造を意識すればcssでいけます

CSS
1<style>
2.selecter{display:none}
3.view:checked ~ .selecter{display:block}
4</style>
5<div>
6<input type="radio" name="r1" value="1" id="r1_1"><label for="r1_1">特にない</label>
7<input type="radio" name="r1" value="2" id="r1_2" class="view"><label for="r1_2">好きな音楽のジャンル</label>
8<div class="selecter">
9  <select id="changeSelect" name="hoge">
10    <option value="select1">ジャンルを選んでください</option>
11    <option value="select2">ロック</option>
12    <option value="select3">ジャズ</option>
13    <option value="select4">ポップス</option>
14    <option value="select5">クラシック</option>
15    <option value="select6">ラテン</option>
16   </select>
17</div>
18</div>
19<hr>
20<div>
21<input type="radio" name="r2" value="1" id="r2_1"><label for="r2_1">特にない</label>
22<input type="radio" name="r2" value="2" id="r2_2" class="view"><label for="r2_2">好きな音楽のジャンル</label>
23<div class="selecter">
24  <select id="changeSelect" name="hoge">
25    <option value="select1">ジャンルを選んでください</option>
26    <option value="select2">ロック</option>
27    <option value="select3">ジャズ</option>
28    <option value="select4">ポップス</option>
29    <option value="select5">クラシック</option>
30    <option value="select6">ラテン</option>
31   </select>
32</div>
33</div>
34