javascript - 为什么标志没有从复选框中消失？

Question

我有一个问题，如果我点击"is"和“自动”，然后点击“否”，“自动”checkbox 和radio 中的标志> 按钮点不消失..我该怎么办？我希望在按下“否”时重置"is"和“汽车”部分。

你能帮帮我吗？

  <fieldset  ><legend>want car?</legend> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <input id="k" type="radio" name="car9" /> <label for="m">yes </label>  <input type="radio" name="car9"  value="No" />No    <nav id="n">
     <ul>
        <div id="ok" style="display:none">
         <table>
             <tbody>
                 <tr>
                     <th></th>
                     <th>Prod</th>
                     <th>Price $</th>
                 </tr>
                 <tr>
                     <td><input id="ok" name="car10" type="checkbox" /></td>
                     <td>car</td>
                     <td><input class="form-control input-sm" name="txtCostAmount80" value="380" type="text"            readonly="" /></td>
                 </tr>
             </tbody>
         </table>
         </div>

     </ul>
     </nav>   </fieldset>
     <script>
          $('#k').click(function() {
          $("#ok").toggle(this.checked);
          });
     </script>  

      <style>
      #n {
       display: none;
       }

       #k:checked ~ #n {
        display: block;
       }
    </style>

Answer 1

属性id在文档中必须是唯一的，要识别具有相同属性的多个元素，您可以使用 class .您可以通过检查单选按钮值来设置检查属性。

您可以尝试以下方式:

$(':radio').click(function() {
  $(".ok").toggle(this.checked);
  if(this.value == 'No')
    $("[type=checkbox]").prop('checked', false);
});

#n {
  display: none;
}

#k:checked ~ #n {
 display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset  >
  <legend>want car?</legend> 
  <input id="k" type="radio" name="car9" /> <label for="m">yes </label>  
  <input type="radio" name="car9"  value="No" />No 
  <nav id="n">
    <ul>
     <div class="ok" style="display:none">
      <table>
          <tbody>
              <tr>
                  <th></th>
                  <th>Prod</th>
                  <th>Price $</th>
              </tr>
              <tr>
                  <td><input class="ok" name="car10" type="checkbox" /></td>
                  <td>car</td>
                  <td><input class="form-control input-sm" name="txtCostAmount80" value="380" type="text"            readonly="" /></td>
              </tr>
          </tbody>
      </table>
      </div>
  </ul>
  </nav>   
</fieldset>