CODEWITHSUNDEEP
javascriptjqueryhtml
David Brierton
David Brierton

Reputation: 7397

Radio button clearance

I have three radio buttons: Click the first radio button and a checkbox appears if you check the box but change your mind and select the second radio button it does not uncheck the checkbox. Same if it was checked and then you changed your mind and chose the third radio button. So what I am trying to figure out is if there is a way make it uncheck or un choose or clear any option that was chosen when a new radio button (of the same group) is picked. Same if the drop down was picked from the third radio button and then they went back and chose radio 1 or radio 2. Any help is greatly appreciated!

PS for some reason my JavaScript was not working in the JavaScript section but did work when it was on the html section... very strange

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>

Upvotes: 2

Views: 132

Answers (2)

Edward Manda
Edward Manda

Reputation: 579

UPDATED

Add ids to the button and then use a function to check or uncheck. Here is a function you can use to check or uncheck the radio buttons 

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

}

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

Upvotes: 0

Alex Char
Alex Char

Reputation: 33218

One quick solution is to set checkbox status to false everytime another radio is clicked. The same you can do for select element:

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>

Upvotes: 2

Related Questions