複数のフィールドがある時、フィールドごとに選択されたラジオボタンによって、文字の表示非表示ができるようにしたいです。

Question

###前提・実現したいこと
下のようにfieldごとに文字列の表示非表示ができるようにしたいです。今はfieldの数だけfunctionを作っているのですが、これを一つだけで済むようにするにはどうすればよいでしょうか。fieldの数が動的に増える時に、onClickの属性値はどのようにセットすればいいのでしょうか。

###該当のソースコード

<div class="field">
<label>表示</label><input type="radio" name="hoge0" value="on" onClick="bar0(0)">
<label>非表示</label><input type="radio" name="hoge0" value="off" onClick="bar0(1)">
<div id="foo0">表示</div>
</div>

<div class="field">                      
<label>表示</label><input type="radio" name="hoge1" value="on" onClick="bar1(0)">
<label>非表示</label><input type="radio" name="hoge1" value="off" onClick="bar1(1)">
<div id="foo1">表示</div>
</div>

<div class="field">
<label>表示</label><input type="radio" name="hoge2" value="on" onClick="bar2(0)">
<label>非表示</label><input type="radio" name="hoge2" value="off" onClick="bar2(1)">
<div id="foo2">表示</div>
</div>

<script>
function bar0(num)
{
  if (num == 0)
  {
    document.getElementById("foo0").style.display="block";
  }
  else
  {
    document.getElementById("foo0").style.display="none";
  }
}
</script>

<script>
function bar1(num)
{
  if (num == 0)
  {
    document.getElementById("foo1").style.display="block";
  }
  else
  {
    document.getElementById("foo1").style.display="none";
  }
}
</script>

<script>
function bar2(num)
{
  if (num == 0)
  {
    document.getElementById("foo2").style.display="block";
  }
  else
  {
    document.getElementById("foo2").style.display="none";
  }
}
</script>

###試したこと
課題に対してアプローチしたことを記載してください

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

Answer 1

スタイルシートでできます。

.field input[value="off"]:checked ~ div[id] {
  display: none;
}

一般兄弟セレクタ (間接セレクタ)
https://developer.mozilla.org/ja/docs/Web/CSS/General_sibling_selectors