選択されているラジオボタンにより表示領域を変更

デモ

選択されているラジオボタンにより表示領域を変更

js部分

<script language="javascript" type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
// <![CDATA[
 // radio選択による表示切替用 radioのvalは1と2で
 function fSwitchTR(radio, id1, id2) {
  var val =$("input[name="+ radio +"]:checked").val();
   
  if(val == 2){
   $("tr#" + id2).hide();
   $("tr#" + id1).show();
  }else {
   $("tr#" + id1).hide();
   $("tr#" + id2).show();
  }
 }

 $(function() {  
  $("tr#category input").click(function(){
   // radio:name属性 , id1, id2
   fSwitchTR('rad_category', 'hoge', 'fuga');
  });
  fSwitchTR('rad_category', 'hoge', 'fuga');
 });
// ]]>
</script>

html部分

<table border="1" cellspacing="0" cellpadding="0">
 <tr id="category">
  <td>
   <input value="1" type="radio" id="aaa" name="rad_category" /><label for="aaa">範囲1</label>
   <input value="2" type="radio" id="iii" name="rad_category" /><label for="iii">範囲2</label>
  </td>
 </tr>
 <tr id="hoge">
  <td>hoge</td>
 </tr>
 <tr id="fuga">
  <td>fuga</td>
 </tr>
</table>