如何在没有 php 的情况下将单选按钮选择从 1html 转移到另一个答案

【问题标题】：How to transfer radio button selection from 1html to another without php如何在没有 php 的情况下将单选按钮选择从 1html 转移到另一个
【发布时间】：2021-05-15 09:19:02
【问题描述】：

我想使用纯 JavaScript Its ok if you use some jQuery 将单选按钮数据从第一个 html 传输到第二个。

jQuery used

第一个 HTML

<body>
<label for="1">
<input type="radio" name="num" id="1" checked="checked" value="1" >1
</label>
<label for="2">
<input type="radio" name="num" id="2" value="2" >2
</label>
<label for="3" >
<input type="radio" name="num" id="3" value="3" >3
</label>
<label for="4">
<input type="radio" name="num" id="4" value="4" >4
</label>
<button onclick="saveSession()">save</button>
<script type="text/javascript">
function saveSession(){
// I want to save the value of the radio button to sessionStorage here
}
</script>
</body>

在我的第二个 HTML 中，我想检索这些数据并将单选按钮的值设置为相同。

第二个 HTML

<body onload="type()">
<label for="1">
<input type="radio" name="num" id="1" checked="checked" value="1" >1
</label>
<label for="2">
<input type="radio" name="num" id="2" value="2" >2
</label>
<label for="3" >
<input type="radio" name="num" id="3" value="3" >3
</label>
<label for="4">
<input type="radio" name="num" id="4" value="4" >4
</label>
<script type="text/javascript">
function type(){
//I want to get the data with sessionStorage.getItem()
}
</script>
</body>

如果你也能告诉我如何禁用表单就更好了

提前感谢您的时间和精力！！

【问题讨论】：

如果你的html文件在同一个域，那么你可以使用浏览器的本地存储。
这可以帮助你stackoverflow.com/questions/25630468/…
是的，本地存储已用于文本输入，但我不知道如何在单选按钮/复选框上使用它。
要访问单选按钮的值，因为您使用的是 jQuery，所以试试这个： $('input[name="num"]:checked').val();
sessionStorage.setItem("num", $('input[name="num"]:checked').val());然后检索它， sessionStorage.getItem("num");

标签： javascript html jquery

【解决方案1】：

添加我的 cmets 作为答案。要访问单选按钮的值，由于您使用的是 jQuery，请尝试以下操作：

$('input[name="num"]:checked').val();

在第一个 HTML 页面上，

sessionStorage.setItem("num", $('input[name="num"]:checked').val());

然后在第二页，

 sessionStorage.getItem("num");

或者，用存储的值设置第二页上收音机的值：

$('input[name="num"]').val([sessionStorage.getItem("num")]);

这是一个小提琴：https://jsfiddle.net/8or3chye/

【讨论】：

它不起作用的原因是我忘记将 jquery 链接到第二页我只将它链接到第一页。很抱歉给您带来麻烦。
你知道如何为复选框做同样的事情吗？ @Andrew_CSE
这将是一个类似的过程。复选框不像单选按钮那样分组，但您可以通过向它们添加一个通用名称来模拟一个组，然后将该名称用作选择器的一部分。这是一个小提琴，展示了一些你可以用它做的事情，类似于你的单选按钮场景，我包括从浏览器存储中保存/检索。 jsfiddle.net/wa1Lfvoz
只是为了它，为了比较，这里是相同的复选框小提琴使用纯 JS 没有 jQuery jsfiddle.net/0mb42xou

【解决方案2】：

您可以向收音机添加更改事件处理程序，并将新值保存到该事件的本地存储中。之后在页面加载时，您需要从本地存储中读取收音机的保存值，如果它存在 - 您通过 id 找到一个元素并将检查设置为 true

<label for="1">
    <input type="radio" name="num" id="1" value="1" onclick="handleClick(this);" >1
</label>
<label for="2">
    <input type="radio" name="num" id="2" value="2" onclick="handleClick(this);" >2
</label>
<label for="3" >
    <input type="radio" name="num" id="3" value="3" onclick="handleClick(this);" >3
</label>
<label for="4">
    <input type="radio" name="num" id="4" value="4" onclick="handleClick(this);" >4
</label>
<script type="text/javascript">
    function handleClick(radio) {
        localStorage.setItem('numRadio', radio.value)
    }

    (function() {
        const radioValue = localStorage.getItem('numRadio')
        if(radioValue) {
            const targetRadio = document.getElementById(radioValue)
            targetRadio.checked = true
        }
    })()
</script>

【讨论】：