Javascriptでradioボタンを押した時に選択分岐で表示を変えたい

Question

前提・実現したいこと

WordpressのContactform7でフォームを作成しています。
その中でradioボタンを使った選択分岐を行っているのですが、選択したradioボタンによって『<div id="output"></div>』のところに別のタグを表示させようとしております。
その際、document.write()や.insertAdjacentHTML()では思ったような表示とならなかったため.innerHTMLを使用してみたのですが、全く動作していないような状況です。

発生している問題・エラーメッセージ

エラーは出ませんが、表示もでません・・・

該当のソースコード

<form name="cf7" class="wpcf7-form init">
***色々処理***
<ul>
	<li><label><input onclick="myCheck();" type="radio" name="aaaa" value="選択肢1" checked="checked" /><span>選択肢1</span></label><li>
	<li><label><input onclick="myCheck();" type="radio" name="aaaa" value="選択肢2" /><span>選択肢2</span></label><li>
	<li><label><input onclick="myCheck();" type="radio" name="aaaa" value="選択肢3" /><span>選択肢3</span></label><li>
</ul>
<div id="output"></div>
***色々処理***
</form>

<div id="output"></div>
<script>
	function myCheck() {
		var flag = false;
		var id = document.getElementById("output");
		for(var i=0; i<document.cf7.aaaa.length;i++){
			if(document.cf7.aaaa[i].checked){ 
				flag = true;
				if(cf7.aaaa[i].value == "選択肢1"){
					id.innerHTML = '表示したい箇所';
				}
				else if(cf7.aaaa[i].value == "選択肢2"){
					id.innerHTML = '表示したい箇所';
				}
				else if(cf7.aaaa[i].value == "選択肢3"){
					id.innerHTML = '表示したい箇所';
				}
			}
		}
	}
</script>

試したこと

document.write()では新規ページ（上書き？）となってしまい、.insertAdjacentHTML()では表示するものの別のラジオボタンを押すと追記されて2行3行と増えてしまいました。
そこで.innerHTMLを使ってみたのですが全く動作しておりません。

表示したいものを先に非表示としておき、選択したものに合わせて表示に切り替える方法も考えましたが、フォームのデータをCSVに吐き出した時に非表示の部分もすべてCSVに取り込まれてしまうため、表示/非表示の方法は諦めました。

今後の勉強のためにも皆さまのお知恵をお借りできれば幸いです。
お手数おかけいたしますが、よろしくお願いいたします。

Comments

[int32_t]

「表示もでません・・・」というのは、ラジオボタンをクリックしても <div id="output"> 内に '表示したい箇所' が表示されない、ということでしょうか? 現状のコードで、ロード時は表示されませんがクリックすれば動きそうですけどね。

[H-A-C]

＞「表示もでません・・・」というのは、ラジオボタンをクリックしても <div id="output"> 内に '表示したい箇所' が表示されない、ということでしょうか?

はい、その通りです。
ラジオボタンをクリックしても画面上に表示されませんでした。
何度か試してみたのですが、コードの間違いなどが分からなかったためご質問させていただいた次第です・・・。

[yambejp]

書き換えたいのか、データは隠しておいて表示を変えたいのかによります

[int32_t]

問題は見当たりません。質問文に書かれている現状のHTMLとJavaScriptをつなげて、ブラウザでロードしてみると期待どおり動きませんか?

[H-A-C]

ご確認ありがとうございます。早速試してみます。

[eneko0513]

https://i.gyazo.com/b0a486920768cf4c9d2f538525bf231c.png
私の環境だと動きますね・・。

Answer 1

先ほどご指摘通り確認いたしましたところ、ご相談いたしましたコードのままで動作いたしました。
昨日まで動いていなかったのですが、何か記述を間違っていたのかもしれません・・・。
int32_t様、yambejp様、eneko0513様ならびにご確認いただきました皆様、誠にありがとうございました。

Answer 2

HTML側のliタグが不整合を起こしているのが原因な気がします。

liタグ閉じてないですよね。

<form name="cf7" class="wpcf7-form init">
***色々処理***
<ul>
<li><label><input onclick="myCheck();" type="radio" name="aaaa" value="選択肢1" checked="checked" /><span>選択肢1</span></label></li>
    <li><label><input onclick="myCheck();" type="radio" name="aaaa" value="選択肢2" /><span>選択肢2</span></label></li>
    <li><label><input onclick="myCheck();" type="radio" name="aaaa" value="選択肢3" /><span>選択肢3</span></label></li>
</ul>
<div id="output"></div>
***色々処理***
</form>

これで試してみてください。

追記：
liは閉じなくても問題無いタグでしたすみません。
こちらで試した感じだと表示したい箇所という文字列は出てきているのと
スクリプトは動いていそうだったので、その周りでなにか原因がないか確認してみてください。

Answer 3

ちょっと書き方のふるさが気になりますが

onclick="myCheck(this.value);"

という指定にして

function myCheck(v) {
  var id = document.getElementById("output");
  var txt="";
  if(v == "選択肢1") txt= '表示したい箇所1';
  if(v == "選択肢2") txt= '表示したい箇所2';
  if(v == "選択肢3") txt= '表示したい箇所3';
  id.innerHTML=txt;
}