Замок радиокниги

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 элемента:

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 
 
    } 
 
}

<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>

Answer 2

ОБНОВЛЕНО

Добавить идентификаторы к кнопке, а затем использовать функцию для проверки или снять отметку. Вот функция, которую можно использовать для проверки или снимите переключатели

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

}

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