要素を選択したら、隠してたhtmlを表示させる

どこかでみたんだけど、どこで見たか忘れちゃったので、とりあえず、忘れないように書いとく。

javascript

function appear(target) {
 var m = document.getElementById(target).style;
 m.display = (m.display == 'none' )? "block":"none";
}

html

チェックボックスの場合
<form name="formname1">
  <input type="checkbox" name="checkboxname" id="formname1" onclick="appear('test');"/>
  &nbsp;<label for="formname1">Yes</label>
</form>

<div id="test" style="display:none;">
  <!-- 隠しておくhtmlをここへ -->
</div>

リンクの場合
<a href="javascript:appear('test2')">testだよ</a>
<div id="test2" style="display:none;">
  <!-- 隠しておくhtmlをここへ -->
</div>

これを応用して*1複数チェックボックスを選択したら
隠してた要素を表示されるようにしたりとかできる。

javascript

function appear(target) {
 var m = document.getElementById(target).style;
 var c1 = document.formname.checkboxname.checked;
 var c2 = document.formname.checkboxname.checked;
 m.display = (m.display == 'none' && c1 && c2 )? "block":"none";
}

って感じ。

*1:っていうほどじゃないけど