要素を選択したら、隠してたhtmlを表示させる
どこかでみたんだけど、どこで見たか忘れちゃったので、とりあえず、忘れないように書いとく。
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');"/> <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複数チェックボックスを選択したら
隠してた要素を表示されるようにしたりとかできる。
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:っていうほどじゃないけど