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

How I can set drop down menu when click on check box of parent then open the sub list of parent?
I want to set drop down menu. When i click on Check-box subject name like Physics then open the sub category of physics otherwise not open. All subject list save in sql database, so i don't put this code:

如何在单击父项复选框时设置下拉菜单,然后打开父项子列表?我想设置下拉菜单。当我点击像物理一样的复选框主题名称然后打开物理的子类别,否则不打开。所有主题列表保存在sql数据库中,所以我不放这个代码:

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

So any more idea give me please. Here a some code of example.but i pick the subject name in Sql Database.i put the php in place of subject name Physics.all subject list show use the while loop. I want to set this menu in table form. Any one can help me. Tell me how can set JQuery.

所以更多的想法请给我。这里有一些示例代码。但是我在Sql Database.i中选择主题名称。将php放在主题名称Physics.all主题列表中,使用while循环。我想以表格形式设置此菜单。任何人都可以帮助我。告诉我如何设置JQuery。

its a example code:

它的示例代码:

<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>

its a real code:

它是一个真正的代码:

<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>

2 个解决方案

#1

I think this is what you want:

我想这就是你想要的:

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

$(this) : Currently clicked checkbox

$(this):目前点击复选框

parent('td') : parent node

parent('td'):父节点

next('td') : Next td element

next('td'):下一个td元素

find('table') : Get the table element inside

find('table'):获取表元素

Demo: https://jsfiddle.net/tusharj/zedqx1ya/

#2

Give classes to tables in html

在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>

js file

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

You can run and check the code here http://jsfiddle.net/quobc2Lf/1/

您可以在这里运行并检查代码http://jsfiddle.net/quobc2Lf/1/

#1