チェックボックスでCSSを表示切替はどうすればいいですか？

質問

チェックボックスにチェックを入れると、現在表示されている箇所が非表示になり、display:none;で非表示にしていたものを表示させる。といった形です。

<input type="checkbox" name="checkbox" id="checkbox" />
<div class="kirikae">
　　最初に表示させる項目
</div>
<div class="hyouji" style="display:none;">
　　チェックを入れると切り替わる。
</div>

すいませんが、ご教授の程をよろしくお願い致します。

回答No.1

yambejp · ベストアンサー

いろいろあるとは思いますが、とりあえずはこんなかんじ

<style>
.hihyouji{
display:none;
}
</style>
<script>
function check(obj){
var n=obj;
while(n=n.nextSibling){
if(n.nodeName=="DIV"){
n.className=n.className=="hihyouji"?"":"hihyouji";
}
}
}
</script>
<div>
<input type="checkbox" onclick="check(this)" />
<div>
　　最初に表示させる項目
</div>
<div class="hihyouji">
　　チェックを入れると切り替わる。
</div>
</div>

ようはグルーピングして、表示していたら非表示、非表示なら表示

お礼

早速のご回答、ありがとうございました。
お陰で解決できました。
どうもjavascriptが苦手でまだ上記を理解できてはいませんが、DIVでのグルーピングを変更するのを課題に、勉強してみます。

本当にありがとうございました。