复选框勾选显示包含其他表单输入的div

Question

当我用id='multiple'选中复选框时，我想要显示div id='multiplemonth'。下面的HTML代码位于PHP函数中，而jquery位于HTML body标记的底部。我正在使用bootstrap，因此已经插入了jQuery。我尝试了其他几种方法，但结果是一样的。

<div class='row'>
   <div class='col-sm-10 offset-sm-1 '>
      <input type='checkbox' name='multiple' id='multiple' >
      <label class=''>Multiple month</label>
   </div>
<br><br>
</div>

<!-- show when checked -->
<div id='multiplemonth'>
  <div class='row'>
     <label class='col-sm-10 offset-sm-1'><b>To    :</b></label>
  </div>
  <div class='row'>
     <label class='col-sm-2 offset-1'>Month  :</label>
     <select class='col-sm-2 col-10 offset-1' name='month_end'>
        <option value='1'> January </option>
        <option value='2'> February </option>
        <option value='3'> March </option>
        <option value='3'> .... </option>
     </select>
     <label class='col-sm-2 offset-1'>Year    :</label>
     <input class='col-sm-2 offset-sm-0 col-10 offset-1' name='year_end' type='number' value='". date("Y") ."'>
   </div><br>
</div>
<!-- show when checked -->

在这里我的JS

$(function() {
  $("#multiple").click(function() {
     $("#multiplemonth").slideToggle(500);
  });
});

Answer 1

我正在使用bootstrap，因此已经插入了jquery。

不，这并不意味着插入了jQuery。你必须单独插入。

最初将目标display的div属性设置为none。

$(function() {
  $("#multiple").click(function() {
     $("#multiplemonth").slideToggle(500);
  });
});

#multiplemonth{
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='row'>
   <div class='col-sm-10 offset-sm-1 '>
      <input type='checkbox' name='multiple' id='multiple' >
      <label class=''>Multiple month</label>
   </div>
<br><br>
</div>

<!-- show when checked -->
<div id='multiplemonth'>
  <div class='row'>
     <label class='col-sm-10 offset-sm-1'><b>To    :</b></label>
  </div>
  <div class='row'>
     <label class='col-sm-2 offset-1'>Month  :</label>
     <select class='col-sm-2 col-10 offset-1' name='month_end'>
        <option value='1'> January </option>
        <option value='2'> February </option>
        <option value='3'> March </option>
        <option value='3'> .... </option>
     </select>
     <label class='col-sm-2 offset-1'>Year    :</label>
     <input class='col-sm-2 offset-sm-0 col-10 offset-1' name='year_end' type='number' value='". date("Y") ."'>
   </div><br>
</div>