Remove the default checked value in radio button and replace it with the another radio button that is click

Question

I just want to change the default check value in radio button to what is the user selected value.Because whenever i try it still display in console log the default checked and not the one who is check. i want to change default checked to what user selected in HTML. Can anyone help me? im just really a newbie. Any help would be appreciated. Thank you.Here is the code. CSS:

    html,
    body {
      font: 400 small-caps 16px/1.25 Arial;
    }

    fieldset {
      width: fit-content;
      padding: 0;
    }

    legend {
      font-size: 1rem
    }

    details {
      width: 150px;
      cursor: pointer;
      margin: 0 4px -5px 0;
      padding: 0 0 0 10px;
    }

    summary {
      position: relative;
      width: 96%;
      outline: 0.5px ridge grey;
    }


    /*
    Hides <detail>'s default arrow
    */

    details summary::-webkit-details-marker {
      visibility: hidden;
      position: absolute;
      z-index: -1;
    }


    /*| Pseudo-<option>
    All pseudo-<option> are initially hidden and 
    <label class='opt'> are the only tags that will show/hide, 
    the next comment explains how.
    */

    .rad {
      display: none
    }

    .opt {
      display: none;
      margin: 0 0 2px 0;
      cursor: pointer;
      font-size: 0.9rem;
      box-shadow: -2px -2px 11px rgba(0, 0, 0, 0.3) inset;
    }


    /*| Two Conditions
    1. If <details open='true'> all <label class='opt'> are visible.
    =============================================
    2. if <input class='rad' type='radio' checked> then the 
       <label class='opt'> that proceeds the radio button is visible.
    */

    [open] .opt,
    .rad:checked+.opt {
      display: block;
    }

    /*| For Demonstration Purposes
    This ruleset changes how the console is displayed.
    */

    .as-console-wrapper {
      width: 50%;
      min-height: 100%;
      margin-left: 50%;
      font-variant: normal;
    }

    .as-console-row.as-console-row::after {
      content: '';
      padding: 0;
      margin: 0;
      border: 0;
      width: 0;
    }
</style>

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Custom select box Jquery Plugin by VJ</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<!--| Flag Icons
This stylesheet provides the flag icons. 
For details, go to: 
https://afeld.github.io/emoji-css/
-->

  <link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet" />
</head>

<body>
 <form id="container">
  <fieldset>
    <legend>Country</legend>

<!--| Pseudo-<select> 
<details> provides the dropdown behavior and
<summary> contains the pseudo-<option>
-->
    <details>
     <summary>

<!--| 4 Pseudo-<option> 
Each <label> and <input type='radio'> pair are
synced to each other by matching the values of
<label for="ID"> and <input id="ID">. 
-->

<!--| Trigger and State
When <label> is clicked ... <input type='radio'>
is checked. This simple "cause and effect" can
be leveraged into a system of states (ie off/on). 
For details, review the CSS. 
-->

  <input id='X' type='radio' class='rad' name='rad' value="" checked>
  <label class='opt' for='X'>
    &nbsp;&nbsp;
    <i class='em em-us'></i> 
    United States
  </label>

  <input id='US' type='radio' class='rad' name='rad' value="United States">
  <label class='opt' for='US'>
    &nbsp;&nbsp;
    <i class='em em-us'></i> 
    United States
  </label>

  <input id='GB' type='radio' class='rad' name='rad' value="Great Britain">
  <label class='opt' for='GB'>
    &nbsp;&nbsp;
    <i class='em em-gb'></i> 
    Great Britain
  </label>

  <input id='IN' type='radio' class='rad' name='rad' value="India">
  <label class='opt' for='IN'>
    &nbsp;&nbsp;
    <i class='em em-flag-in'></i>
    India
  </label>

  <input id='NP' type='radio' class='rad' name='rad' value="Nepal">
  <label class='opt' for='NP'>
    &nbsp;&nbsp;
    <i class='em em-flag-np'></i>
    Nepal
  </label>

  </summary>
</details>
</fieldset>
</form>

</body>
</html>

JAVASCRIPT

<script type="text/javascript">
    var xC = document.forms.container;
    var xE = xC.elements;
    var vR = xE.rad;

    xC.onchange = function() {
      // console.log(vR.value);
      // location.reload();
      if(vR.value=="United States") {
        alert("welcome us");
        location.reload();
      }
      else if(vR.value=="United States") {
        alert("welcome us");
        location.reload();
      }

    }
</script>

score 0 · Answer 1 · answered Dec 13 '18 at 21:43

Are you saying that when selecting the United States radio button it selects the default radio button in error? The

location.reload()

lines are reloading the page whenever the United States radio button is selected, and the new page defaults to the first radio button as selected. So you could just remove those lines and the correct radio button would stay as selected.

If the page reload is intentional and you want the new page to have the same radio button selected as the last page then you could pass a URL param to the new page and then use javascript on the new page to read any params and select the right radiobutton

e.g.

document.replace('yourpage.html?selectedCountry=US')

if i choose the country of Great Britain and then reload it the display is still the default value that is checked. however i i remove the "checked" in the united states nothings appear anymore — rrr, Dec 13 '18 at 21:50

zer00ne · Accepted Answer · 2018-12-17T01:01:01.917

`localStorage`

Use localStorage to save the selected value then retrieve the value when page is reloaded. Note: For details on how the rest of this demo works, see this post.

var xC = document.forms.container;
var xE = xC.elements;
var vR = xE.rad;
var cty = localStorage.getItem('country');
xC.addEventListener('change', saveCountry);
document.addEventListener('DOMContentLoaded', setCountry);
function saveCountry(e) {
  localStorage.setItem('country', vR.value);
  console.log("Welcome, " + vR.value);
};
function setCountry(e) {
  for (let i = 0; i < vR.length; i++) {
    if (vR[i].value === cty) {
      vR[i].checked = true;
    }
  }
  console.log("Welcome, " + vR.value);
};

Plunker

Demo

This demo does not fully function due to SO restricting localStorage. For a fully functional demo, review this Plunker. To test it, select a country, then refresh the page by clicking the refresh button in the preview panel or CTRL+ENTER for PC or ⌘+RETURN for Mac.

Details are commented in demo

var xC = document.forms.container;
var xE = xC.elements;
var vR = xE.rad;
/* 
Get the string saved in localStorage named 'country'
*/
var cty = localStorage.getItem('country');

/*| When <form> is changed
Call saveCountry()
*/
xC.addEventListener('change', saveCountry);

/*| When Page is Reloaded
Call setCountry()
*/
document.addEventListener('DOMContentLoaded', setCountry);

/*
Save the value selected in pseudo-<select> in localStorage
*/
function saveCountry(e) {
  localStorage.setItem('country', vR.value);
  console.log("Welcome, " + vR.value);
};

/*
Loop through the pseudo-<option>s
When a pseudo<option> matches the value saved...
in localStorage under the name of 'country'...
check that pseudo-<option> by assigning it...
the attribute [checked] = true
*/
function setCountry(e) {
  for (let i = 0; i < vR.length; i++) {
    if (vR[i].value === cty) {
      vR[i].checked = true;
    }
  }
  console.log("Welcome, " + vR.value);
};

html,
body {
  font: 400 small-caps 16px/1.25 Arial;
}

fieldset {
  width: fit-content;
  padding: 0;
}

legend {
  font-size: 1rem
}

details {
  width: 170px;
  cursor: pointer;
  margin: 0 4px -5px 0;
  padding: 0 5px 10px 10px;
}

summary {
  width: 100%;
  position: relative;
}


/* 
    Shows <detail>'s default arrow
    */


/*
    summary::-webkit-details-marker {
      position: absolute;
      padding: 0 0 0 5px;
      z-index: 1;
      top: 25%;
    }
    
    [open] summary::-webkit-details-marker {
      top: 5%;
    }
    
    .em {
      padding: 0 0 0 10px;
    }
    */


/*
    Hides <detail>'s default arrow
    */

summary::-webkit-details-marker {
  visibility: hidden;
  position: absolute;
  z-index: -1;
}

.em {
  padding: 0;
}


/*| Pseudo-<option>
    All pseudo-<option> are initially hidden and 
    <label class='opt'> are the only tags that will show/hide, 
    the next comment explains how.
    */

.rad {
  display: none
}

.opt {
  display: none;
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0;
  cursor: pointer;
  font-size: 0.9rem;
  box-shadow: -2px -2px 11px rgba(0, 0, 0, 0.3) inset;
}


/*| Two Conditions
    1. If <details open='true'> all <label class='opt'> are visible.
    =============================================
    2. if <input class='rad' type='radio' checked> then the 
       <label class='opt'> that proceeds the radio button is visible.
    */

[open] .opt,
.rad:checked+.opt {
  display: block;
}


/*| For Demonstration Purposes
    This ruleset changes how the console is displayed.
    */

.as-console-wrapper {
  max-height: 50%;
  font-variant: normal;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Custom select box Jquery Plugin by VJ</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <!--| Flag Icons
This stylesheet provides the flag icons. 
For details, go to: 
https://afeld.github.io/emoji-css/
-->

  <link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">


</head>

<body>
  <form id="container">
    <fieldset>
      <legend>Country</legend>

      <!--| Pseudo-<select> 
<details> provides the dropdown behavior and
<summary> contains the pseudo-<option>
-->
      <details>
        <summary>

          <!--| 4 Pseudo-<option> 
Each <label> and <input type='radio'> pair are
synced to each other by matching the values of
<label for="ID"> and <input id="ID">. 
-->

          <!--| Trigger and State
When <label> is clicked ... <input type='radio'>
is checked. This simple "cause and effect" can
be leveraged into a system of states (ie off/on). 
For details, review the CSS. 
-->

          <input id='X' type='radio' class='rad' name='rad' value="" checked>
          <label class='opt' for='X'>
            &nbsp;&nbsp;
            <i class='em em-us'></i> United States
          </label>

          <input id='US' type='radio' class='rad' name='rad' value="United States">
          <label class='opt' for='US'>
            &nbsp;&nbsp;
            <i class='em em-us'></i> United States
          </label>

          <input id='GB' type='radio' class='rad' name='rad' value="Great Britain">
          <label class='opt' for='GB'>
            &nbsp;&nbsp;
            <i class='em em-gb'></i> Great Britain
          </label>

          <input id='IN' type='radio' class='rad' name='rad' value="India">
          <label class='opt' for='IN'>
            &nbsp;&nbsp;
            <i class='em em-flag-in'></i> India
          </label>

          <input id='NP' type='radio' class='rad' name='rad' value="Nepal">
          <label class='opt' for='NP'>
            &nbsp;&nbsp;<i class='em em-flag-np'></i>&nbsp;&nbsp;Nepal
          </label>

        </summary>
      </details>

    </fieldset>
  </form>

  <!--|For Demonstration Purposes
Provides console
-->


</body>

</html>

Remove the default checked value in radio button and replace it with the another radio button that is click

2 Answers2

`localStorage`

Plunker

Demo

Linked