当选择相反的单选按钮时，清除复选框和下拉菜单。

Question

当我点击相反的单选按钮时，如何清除复选框中的勾选标记？出于某种原因，我无法清除它，请有人告诉我我做错了什么？如果下拉框被选择，我也想知道如何重置它们。我猜这个语法让我无法掌握:/$("#div12 > .clearfix input:select").val(""); 我哪里错了？

function showhideCOREForm(transferring_vehicle_license) {
     if (transferring_vehicle_license == "Current") {
         document.getElementById("div11").style.display = 'block';
         document.getElementById("div12").style.display = 'none';
   $("#div12 > #secondYearCB").prop("checked", false);
         FC.wantsASecondYear = false;
     } else if (transferring_vehicle_license == "Expired") {
         document.getElementById("div12").style.display = 'block';
         document.getElementById("div11").style.display = 'none';
   $("#div6 > .clearfix input:text").val("");
  }
 }

<input type="radio" value="Current" name="transferring_vehicle_license" id="transferring_vehicle_license" required="yes" onclick="calculateTotal()" onchange="showhideCOREForm(this.value);"/><label for="transferring_vehicle_license">Current Registration</label>
  <input type="radio" value="Expired" name="transferring_vehicle_license" id="notransferring_vehicle_license" onclick="calculateTotal()" onchange="showhideCOREForm(this.value);"/><label for="notransferring_vehicle_license">Expired Registration</label>

<div id="div12" style="display:none">

 <div class="clearfix">
  <label for='CMonths' class="labelDoubleIndent">Calculate Months:</label>
  <select name="month1" id="month1" size="1">
      <option value="">Choose a Month</option>
      <option value="0">January</option>
      <option value="1">February</option>
      <option value="2">March</option>
      <option value="3">April</option>
      <option value="4">May</option>
      <option value="5">June</option>
      <option value="6">July</option>
      <option value="7">August</option>
      <option value="8">September</option>
      <option value="9">October</option>
      <option value="10">November</option>
      <option value="11">December</option>
  </select>
  <select name="month2" id="month2" size="1">
      <option value="">Choose an Option</option>
      <option value="2">2</option>
      <option value="14">14</option>
  </select>
  <select name="month3" id="month3" size="1">
      <option value="">Choose an Option</option>
      <option value="3">3</option>
      <option value="15">15</option>
  </select>

  <div id="secondYear" class="labelDoubleIndent">
         <b>Do you want to add a second year?</b>
         Yes: <input type="checkbox" name="secondYear" id="secondYearCB" />
     </div><!-- secondYear -->
 </div>
</div>

<div id="div11" style="display:none">

</div>

- user4184124

Answer 1

你使用了错误的选择器： #secondYearCB 不是 #div12 的第一个子元素。请改用后代选择器：

$('#div12 #secondYearCB').prop("checked", false);

相同的理由也适用于 select - select 不是输入！仅使用以下内容：

$("#div12 > .clearfix select").val("");

- Roman Bekkiev

Answer 2

两个选择器对复选框和下拉菜单都是错误的。

关于复选框，由于您在其中使用了ID，请直接使用该ID：

$("#secondYearCB").prop("checked", false);

选择框不是输入框，所以只需使用“select”一词。

$("#div12 > .clearfix > select").val("");

提示：我添加了">"来仅获取".clearfix" div的直接SELECT子元素，如果您不需要此功能，请将其删除。

选择器：>

- Jacobi

---

你改变了不仅仅是元素查询的方式，这使得它能够工作。如果你只是将你回答的内容替换到他当前的代码中，它是不能工作的。 - Aweary

@Aweary，是的，但我没有改变HTML，我只是改变了事件被分派的方式，如果你测试Roland的答案，它也不会起作用，这不是我们的问题，可能是来自堆栈片段。 :) - Jacobi

你已经移除了 onchange 和 onclick 事件，我认为这是正确的做法。我同意，我认为 stack snippet 对此有问题。 - Aweary

没问题，发表你的答案。对我来说，选择器在这里是错误的，你自己测试一下。现在为什么在堆栈片段上无法工作，我还不知道。 - Jacobi

如果您想亲眼看到，可以在这里查看，同样的JS和HTML只有我的更改... http://jsfiddle.net/tiagoajacobi/8adoy0pq/2/ - Jacobi

没错，我认为堆栈片段出了一些问题。 - Aweary