Javascript 单击父项复选框然后打开父项的子列表时，如何设置下拉菜单？

单击父项复选框然后打开父项的子列表时，如何设置下拉菜单
我想设置下拉菜单。当我点击复选框“科目名称”如“物理”时，打开“物理”子类别，否则不打开。所有主题列表都保存在sql数据库中，所以我不放以下代码：

$('input[name="Physics"]').on('click', function(){$('.physicsTable').slideToggle();})
$('input[name="Chemistry"]').on('click', function(){$('.cheTable').slideToggle();})

所以，还有什么想法请告诉我。下面是一些示例代码。但是我在Sql数据库中选择了主题名。我用php代替了主题名。所有主题列表显示使用while循环。我想把这个菜单设置成表格形式。任何人都可以帮助我。告诉我如何设置JQuery

这是一个示例代码：

<table >
<tr>
        <td valign="top">Disciplines :</td>
        <td><table>
            <tr>

         <td width="30"><input type="checkbox" name="Physics" /></td>
              <td width="200">Physics
              <table style="display:none;">
            <tr>
              <td width="30"><input type="checkbox" name="Acoustics" /></td>
              <td width="200">Acoustics</td>
               </tr>
                  <tr>
              <td width="30"><input type="checkbox" name="Cosmology" /></td>
              <td width="200">Cosmology</td>
               </tr>
                  <tr>
              <td width="30"><input type="checkbox" name="Nuclear Physics" /></td>
              <td width="200">Nuclear Physics</td>
               </tr>
          </table>

                    <td width="30"><input type="checkbox" name="Chemistry" /></td>
              <td width="200">Chemistry
              <table style="display:none;">
            <tr>
              <td width="30"><input type="checkbox" name="Chromatography" /></td>
              <td width="200">Chromatography</td>
               </tr>
                  <tr>
              <td width="30"><input type="checkbox" name="Catalysis" /></td>
              <td width="200">Catalysis</td>
               </tr>
                  <tr>
              <td width="30"><input type="checkbox" name="Geochemistry" /></td>
              <td width="200">Geochemistry</td>
                    </tr>
          </table>
               </tr>
          </table>
              </td>

                </tr>




          </table>  

学科：
物理
声学
宇宙学
核物理
化学
色谱法
催化作用
地球化学

这是一个真实的代码：

<table>
<tr>
        <td valign="top">Disciplines
        <?php echo REQUIRED?></td>
        <td><table>
            <tr>
            <?php $rsED=$db->execute("SELECT Ed_Id, Ed_Name FROM ".TBL_EVENT_Desipiline." Where Ed_Parent=0");
         while($rowED=$db->row($rsED)){?>
              <td width="30"><input id="menu1" type="checkbox" name="<?php echo $rowED["Ed_Name"]?>" /></td>
              <td width="200"><?php echo $rowED["Ed_Name"]?>
              <table class="physicsTable" style=" display:none;">
            <tr>
            <?php $rsSED=$db->execute("SELECT Ed_Id, Ed_Name, Ed_Parent FROM ".TBL_EVENT_Desipiline." WHERE Ed_Parent='".$rowED["Ed_Id"]."'ORDER BY Ed_Id");
         while($rowSED=$db->row($rsSED)){?>
              <td width="30"><input type="checkbox" name="<?php echo $rowSED["Ed_Name"]?>" /></td>
              <td width="200"><?php echo $rowSED["Ed_Name"]?></td>
               </tr><?php  } ?>
          </table>
              </td> 
            </tr><?php  } ?>
          </table>  
          </td>
      </tr>
</table>

学科
我想这就是你想要的：

$(':checkbox').on('click', function () {
    $(this).parent('td').next('td').find('table').slideToggle();
});

$（此）
：当前已单击
复选框
parent（'td'）
：父节点
next（'td'）
：next
td
元素
find（'table'）
：将
表格
元素放在里面
演示：
在html中为表提供类

<table >
<tr>
        <td valign="top">Disciplines :</td>
        <td><table>
            <tr>

         <td width="30"><input type="checkbox" name="Physics" /></td>
              <td width="200">Physics
              <table class='physicsTable' >
            <tr>
              <td width="30"><input type="checkbox" name="Acoustics" /></td>
              <td width="200">Acoustics</td>
               </tr>
                  <tr>
              <td width="30"><input type="checkbox" name="Cosmology" /></td>
              <td width="200">Cosmology</td>
               </tr>
                  <tr>
              <td width="30"><input type="checkbox" name="Nuclear Physics" /></td>
              <td width="200">Nuclear Physics</td>
               </tr>
          </table>

                    <td width="30"><input type="checkbox" name="Chemistry" /></td>
              <td width="200">Chemistry
              <table class='cheTable'>
            <tr>
              <td width="30"><input type="checkbox" name="Chromatography" /></td>
              <td width="200">Chromatography</td>
               </tr>
                  <tr>
              <td width="30"><input type="checkbox" name="Catalysis" /></td>
              <td width="200">Catalysis</td>
               </tr>
                  <tr>
              <td width="30"><input type="checkbox" name="Geochemistry" /></td>
              <td width="200">Geochemistry</td>
                    </tr>
          </table>
               </tr>
          </table>
              </td>         
                </tr>   
          </table>  

您可以在此处运行并检查代码
@Tushar我输入了真实代码。检查代码…此父主题复选框为什么设置在中间..任何人选项此父复选框仅显示主题名称在同一行中。不向下走。您看不到我的真实代码。我在sql表中选择主题名称..您的ans是gud，但…我没有设置类…因为当我单击一个父主题时，所有主题列表都会同时打开。然后另一个父主题列表会同时打开。。。
$(document).ready(function(){
   $('.physicsTable').hide();
    $('.cheTable').hide();   
$('input[name="Physics"]').on('click',function(){$('.physicsTable').toggle();})
$('input[name="Chemistry"]').on('click', function(){$('.cheTable').toggle();})
});