###前提・実現したいこと
下のようにfieldごとに文字列の表示非表示ができるようにしたいです。今はfieldの数だけfunctionを作っているのですが、これを一つだけで済むようにするにはどうすればよいでしょうか。fieldの数が動的に増える時に、onClickの属性値はどのようにセットすればいいのでしょうか。
###該当のソースコード
html
1<div class="field"> 2<label>表示</label><input type="radio" name="hoge0" value="on" onClick="bar0(0)"> 3<label>非表示</label><input type="radio" name="hoge0" value="off" onClick="bar0(1)"> 4<div id="foo0">表示</div> 5</div> 6 7<div class="field"> 8<label>表示</label><input type="radio" name="hoge1" value="on" onClick="bar1(0)"> 9<label>非表示</label><input type="radio" name="hoge1" value="off" onClick="bar1(1)"> 10<div id="foo1">表示</div> 11</div> 12 13<div class="field"> 14<label>表示</label><input type="radio" name="hoge2" value="on" onClick="bar2(0)"> 15<label>非表示</label><input type="radio" name="hoge2" value="off" onClick="bar2(1)"> 16<div id="foo2">表示</div> 17</div>
js
1<script> 2function bar0(num) 3{ 4 if (num == 0) 5 { 6 document.getElementById("foo0").style.display="block"; 7 } 8 else 9 { 10 document.getElementById("foo0").style.display="none"; 11 } 12} 13</script> 14 15<script> 16function bar1(num) 17{ 18 if (num == 0) 19 { 20 document.getElementById("foo1").style.display="block"; 21 } 22 else 23 { 24 document.getElementById("foo1").style.display="none"; 25 } 26} 27</script> 28 29<script> 30function bar2(num) 31{ 32 if (num == 0) 33 { 34 document.getElementById("foo2").style.display="block"; 35 } 36 else 37 { 38 document.getElementById("foo2").style.display="none"; 39 } 40} 41</script> 42 43
###試したこと
課題に対してアプローチしたことを記載してください
###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。