HTML-如何将自定义单选按钮存储到本地存储中

Question

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

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

我想把它旁边的文本(EUW(存储到一个名为"的localStorage项中；区域"；，当选中单选按钮时。这个有多个单选按钮，我想为所有的按钮都做。每个自定义单选按钮都有另一个值(EUW、EUNE、JP、KR等(其他一切都是相似的。所以我试着想办法做到这一点，但我找不到一个好的解决方案。

你们有什么好的解决方案吗？：O谢谢你的帮助，我很感激。干杯

Answer 1

您使用相同的类radiobtn创建自定义单选按钮，然后在radiobtn类上的JQuery中单击事件检查是否选中单选按钮，获取标签文本并将其存储在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);
}
});