`localStorage`

Question

我只想将单选按钮中的默认检查值更改为用户选择的值。因为每当我尝试将其仍显示在控制台日志中时，默认检查的内容就会被选中，而不是被选中的那个。我想更改默认选中的用户在HTML中选择。谁能帮我？我只是一个新手。任何帮助，将不胜感激。谢谢，这是代码。 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>

Answer 1

您是说在选择“美国”单选按钮时选择了错误的默认单选按钮吗？

location.reload()

每当选择“美国”单选按钮时，

行将重新加载页面，并且新页面默认为所选的第一个单选按钮。因此，您只需删除这些行，正确的单选按钮就会保持选中状态。

如果有意重新加载页面，并且您希望新页面具有与最后一页相同的单选按钮，则可以将URL参数传递给新页面，然后在新页面上使用javascript读取任何参数，然后选择右侧的单选按钮

例如

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

Answer 2

`localStorage`

使用localStorage保存所选值，然后在重新加载页面时检索该值。 注意：有关此演示其余部分的工作方式的详细信息，请参见此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

演示

由于SO restricting localStorage，此演示无法完全运行。有关完整的演示，请查看此Plunker。要对其进行测试，请选择一个国家/地区，然后通过单击预览面板中的刷新按钮刷新页面，或者对于PC或⌘单击 CTRL + ENTER + 返回（对于Mac）

详细信息在演示中被评论

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>

删除单选按钮中的默认检查值，并将其替换为单击的另一个单选按钮

2 个答案:

`localStorage`

Plunker

演示