チェックボックスの値によってCSSを変更したい

質問

タブを押すと投稿カテゴリーのチェックボックスに値が入り
それぞれのカテゴリーに沿った投稿画面がCSSにより表示されるように作ったのですが

現在の作りでは投稿編集画面に切り替えた時に
タブがデフォルトの状態に戻ってしまうことに気が付きました。

無い頭を使い考えた解決策が編集画面に切り替わった時に
どのチェックボックスに値が入っているかを判断しそれに沿った
CSSを適応させる方法を思いついたのですが

jqueryに関して全くの素人ですのでどの様に処理すれば良いかわからずに困っています。

この場合if文を使用して判定を行えば良いと考え

$(function(){
$(document).ready(function($){if( $( '#select1' ).is( ':checked' ) ) {
$("#aaa").css('display','block')
}

});
});

自分なりに調べて試してみたのですが上手く動きませんでした。
もしよろければどなたかご回答のほどよろしくお願いいたします。

回答No.1

blanc210

シチュエーションがちょっとよくわからなかったんですけど、
こんなんじゃダメですか？

<input type="button" name="btn1" id="1" class="btn" value="タブ1" />
<input type="button" name="btn2" id="2" class="btn" value="タブ2" />
<input type="button" name="btn3" id="3" class="btn" value="タブ3" />

<input type="checkbox" name="cat1" id="cat_1" class="cat" value="1">カテゴリ1
<input type="checkbox" name="cat2" id="cat_2" class="cat" value="1">カテゴリ2
<input type="checkbox" name="cat3" id="cat_3" class="cat" value="1">カテゴリ3

<div id="tab_1" class="tab" style="display:none;">
タブ1ページ
</div>
<div id="tab_2" class="tab" style="display:none;">
タブ2ページ
</div>
<div id="tab_3" class="tab" style="display:none;">
タブ3ページ
</div>

<script type="text/javascript">
$(function(){
$('.btn').click(function(){
var cat = '#cat_' + $(this).attr('id');
var tab = '#tab_' + $(this).attr('id');

$('.cat').removeAttr('checked');
$(cat).attr('checked', 'checked');

$('.tab').css('display', 'none');
$(tab).css('display', 'block');
});
});
</script>