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

Question

我想设置下拉菜单。当我单击Check-Box物理时，请打开子类别。其他明智的不打开。在这里有一些代码。我想在表格表单中设置此菜单..任何人都可以帮助我..告诉我如何设置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

我已经对您的代码进行了稍微修改，并希望它能有所帮助

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>

Answer 4

您也可以使用CSS进行此操作。想象一下，您有此复选框，菜单作为兄弟姐妹：

<input type="checkbox" class="switcher">
<ul class="menu">
  <li>Home</li>
  <li>Products</li>
  <li>Info</li>
  <li>Contact</li>
</ul>

然后，您默认可以将最大高点设置为0，并在复选框为：necked

时将其设置为0

.menu{
  overflow:hidden;
  background: red;
  width: 150px;
  max-height: 0px;
  transition: max-height 0.6s ease;
}
.switcher:checked + .menu{
  max-height: 100px;
}

这是一支笔：http：//codepen.io/vandervals/pen/pjgmzv