html - HTML - 如何将我的自定义单选按钮存储到我的 localStorage 中？

Question

好的，所以我有一个自定义单选按钮：

              <label class="radiobtn" id="region">EUW
                <input type="radio" name="radio">
                <span class="checkmark"></span>
              </label>

我想在选中单个按钮时将其旁边的文本（EUW）存储到一个名为“区域”的局部存储项目中。有多个单选按钮，我想为所有这些单选按钮。每个自定义单选按钮都有另一个值（EUW、EUNE、JP、KR 等......）其他一切都相似。所以我有点想弄清楚我怎么能做到这一点，但我找不到一个好的解决方案。

大家有什么好的解决办法吗？:O 谢谢你的帮助，我很感激。干杯!

Answer 1

您创建所有具有相同类radiobtn的自定义单选按钮，然后在JQuery中对radiobtn类单击事件检查单选按钮是否被选中，获取标签文本并将其存储在localStorage中。

JSFiddle

https://jsfiddle.net/mLst49h8/

HTML

<label class="radiobtn" >EUW
  <input type="radio" name="radio" >
  <span class="checkmark"></span>
</label>

<label class="radiobtn" >EUNE
  <input type="radio" name="radio" >
  <span class="checkmark"></span>
</label>

jQuery

$( ".radiobtn" ).click(function() {
  if($(this).children("input").is(":checked"))   {
      // alert( $(this).text());
      var region = $(this).text();
      localStorage.setItem("region", region);
      region = localStorage.getItem("region");
      alert(region);
   }
});