Question

我有三个单选按钮：单击第一个单选按钮，如果选中该框但会改变主意并选择第二个单选按钮不会取消选中该复选框，则会出现一个复选框。如果它被检查，然后你改变了主意并选择了第三个单选按钮，则相同。所以我想弄清楚的是，如果有一种方法可以取消选中或取消选择或清除在选择新的单选按钮（同一组）时选择的任何选项。如果从第三个单选按钮中选择下拉，然后他们返回并选择了收音机1或收音机2，则相同。任何帮助都非常感谢！

PS出于某种原因，我的JavaScript在JavaScript部分没有工作，但在html部分工作时确实有效...非常奇怪

http://jsfiddle.net/b9uevhqz/2/

    <label><strong>Proof of Ownership</strong></label><br />
        <label class='radiolabel'>
          <input 
            type="radio"  
            name="ownership" 
            value="MCO" 
            onclick="calculateTotal()" 
            onchange="statedropDown(this.value);"/>
            Manufacturer's Statement of Origin&nbsp;&nbsp;</label>
       <label class='radiolabel'>
          <input 
            type="radio"  
            name="ownership" 
            value="FL Title" 
            onclick="calculateTotal()" 
            onchange="statedropDown(this.value);"/>
            Florida Certificate of Title&nbsp;&nbsp;</label>
       <label class='radiolabel'>
          <input 
            type="radio"  
            name="ownership" 
            value="OOS Title" 
            onclick="calculateTotal()" 
            onchange="statedropDown(this.value);"/>
            Out-of-state Certificate of Title&nbsp;&nbsp;</label>

    <div id="div3" style="display:none">
    <div class="clearfix">
         <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>
    </div>
    </div>

    <div id="div4" style="display:none">
    <!---You are not qualified to see this form.--->
    </div>
    <div id="div5" style="display:none">
    <p><label for='brandnewrv' class="inlinelabel">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Check if Brand new RV/Motor Home</label>
       <input type="checkbox" id="brandnewrv" name='brandnewrv' onclick="calculateTotal()" /></p>

        <script type="text/javascript">
    function statedropDown(ownership) {
        if (ownership == "OOS Title") {
            document.getElementById("div3").style.display = 'block';
            document.getElementById("div4").style.display = 'none';
            document.getElementById("div5").style.display = 'none';
        } 
        else if (ownership == "FL Title") {
            document.getElementById("div4").style.display = 'block';
            document.getElementById("div3").style.display = 'none';
            document.getElementById("div5").style.display = 'none';
        }
        else if (ownership == "MCO") {
            document.getElementById("div5").style.display = 'block';
            document.getElementById("div3").style.display = 'none';
            document.getElementById("div4").style.display = 'none';
        }
    }


    </script>

Answer 1

一个快速的解决方案是每次点击另一个无线电时将复选框状态设置为false。您可以对select元素执行相同的操作：

＆＃13;

function statedropDown(ownership) {
  if (ownership == "OOS Title") {
    document.getElementById("div3").style.display = 'block';
    document.getElementById("div4").style.display = 'none';
    document.getElementById("div5").style.display = 'none';
    document.getElementById("brandnewrv").checked = false; //here change the status of checkbox
  } else if (ownership == "FL Title") {
    document.getElementById("div4").style.display = 'block';
    document.getElementById("div3").style.display = 'none';
    document.getElementById("div5").style.display = 'none';
    document.getElementById("month1").selectedIndex = 0;//here resets the value of dropdown to default
  } else if (ownership == "MCO") {
    document.getElementById("div5").style.display = 'block';
    document.getElementById("div3").style.display = 'none';
    document.getElementById("div4").style.display = 'none';
    document.getElementById("brandnewrv").checked = false;//here change the status of checkbox
    document.getElementById("month1").selectedIndex = 0;//here resets the value of dropdown to default
  }
}

＆＃13;

<label><strong>Proof of Ownership</strong>
</label>
<br />
<label class='radiolabel'>
  <input type="radio" name="ownership" value="MCO" onclick="calculateTotal()" onchange="statedropDown(this.value);" />Manufacturer's Statement of Origin&nbsp;&nbsp;</label>
<label class='radiolabel'>
  <input type="radio" name="ownership" value="FL Title" onclick="calculateTotal()" onchange="statedropDown(this.value);" />Florida Certificate of Title&nbsp;&nbsp;</label>
<label class='radiolabel'>
  <input type="radio" name="ownership" value="OOS Title" onclick="calculateTotal()" onchange="statedropDown(this.value);" />Out-of-state Certificate of Title&nbsp;&nbsp;</label>
<div id="div3" style="display:none">
  <div class="clearfix">
    <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>
  </div>
</div>
<div id="div4" style="display:none">
  <!---You are not qualified to see this form.--->
</div>
<div id="div5" style="display:none">
  <p>
    <label for='brandnewrv' class="inlinelabel">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Check if Brand new RV/Motor Home</label>
    <input type="checkbox" id="brandnewrv" name='brandnewrv' onclick="calculateTotal()" />
  </p>

＆＃13;

Answer 2

更新

向按钮添加ID，然后使用功能检查或取消选中。这是一个可用于检查或取消选中单选按钮的功能

function check() {
    document.getElementById("buttonID").checked = true;

}

function uncheck() {
    document.getElementById("buttonID").checked = false;
}

单选按钮清除

2 个答案: