如何设置单击复选框时设置下拉菜单集？

Question

我想设置下拉菜单。当我点击复选框物理，然后打开子类别。否则就不会open.Here a一些代码..我想在表格中设置这个菜单，其中一个可以帮助me..tell我如何设置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>  
          </td>
      </tr>
</table>

​

Answer 1

我希望这对你有用。

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

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

Answer 2

试试这个：

​

$('input[name=Physics], input[name=Chemistry]').on('click', function(){
  if($(this).is(':checked')){
       $(this).parent().next().find('table').show();
  }else{
        $(this).parent().next().find('table').hide();
    }
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
</td>
</tr>
</table>

​

Answer 3

我已经稍微修改了你的代码和PFB的源代码，希望它能有所帮助

HTML

​

function showhidetables(value) {


  if (value == "1") {
    document.getElementById('phisycs').style.display = "table";
    document.getElementById('Chemistry').style.display = "none";
    document.getElementById("PhysicsCheck").checked = true;
    document.getElementById("ChemistryCheck").checked = false;
  }
  if (value == "2") {
    document.getElementById('phisycs').style.display = "none";
    document.getElementById('Chemistry').style.display = "table";
    document.getElementById("PhysicsCheck").checked = false;
    document.getElementById("ChemistryCheck").checked = true;
  }
}

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

          <td width="30">
            <input type="checkbox" id="PhysicsCheck" name="Physics" onClick="showhidetables('1')" />
          </td>
          <td width="200">Physics
            <table id="phisycs" 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" id="ChemistryCheck" onClick="showhidetables('2')" />
            </td>
            <td width="200">Chemistry
              <table style="display: none;" id="Chemistry">
                <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>

​