选择单选按钮后刷新页面，但保持单选按钮的值

Refresh page after selecting radio button but keep the radio button value

本文关键字：单选按钮 刷新 选择      更新时间：2023-09-26

我正在创建一个页面，用户可以通过单击单选按钮来选择一个选项。我希望页面刷新保持所选的单选按钮值。这些是我的代码。

HTML 

<div style="float:right">
    <label><input type="radio" name="colorRadio" value="f1">Option 1</label><br>
    <label><input type="radio" name="colorRadio" value="f2">Option 2</label><br>
    <label><input type="radio" name="colorRadio" value="f3">Option 3</label><br>
</div>
<div style="float:left;" class="f1 box">This is option 1</div>
<div style="float:left;" class="f2 box">This is option 2</div>
<div style="float:left;" class="f3 box">This is option 3</div>
JAVASCRIPT 

 $('input[type="radio"]').click(function(){
        if($(this).attr("value")=="f1"){
            $(".box").hide();
            $(".f1").show();
        }
        if($(this).attr("value")=="f2"){
            $(".box").hide();
            $(".f2").show();
        }
        if($(this).attr("value")=="f3"){
            $(".box").hide();
            $(".f3").show();
        }
    });
CSS 

 .box{
    padding: 20px;
    display: none;
    margin-top: 20px;
    border: 1px solid #000;
}

是否有一种方法来重新加载只是div而不是刷新整个页面?

如果这是一个HTML文件，则使用localStorage存储value属性单击的<input>，然后在加载页面时，运行右侧<input>元素的onclick事件。

$(function() {
    $("input[type='"radio'"]").click(function(){
        [...]
        //localStorage:
        localStorage.setItem("option", value);
    });
    //localStorage:
    var itemValue = localStorage.getItem("option");
    if (itemValue !== null) {
        $("input[value='""+itemValue+"'"]").click();
    }
});

如果在服务器上运行，则使用document.cookie存储value属性单击的<input>，当向客户端服务器端发送数据时，选中正确的<input>并显示正确的框。

$(function() {
    $("input[type='"radio'"]").click(function(){
        [...]
        //Cookies:
        document.cookie="option="+value;
    });
    //Cookies:
    /*Load the page with the correct input checked based off cookies*/
});

这里是小提琴(不幸的是，cookie不工作在这里):http://jsfiddle.net/NobleMushtak/vTT7J/

添加autocomplete='on'属性到您的输入字段

您可以在选择单选按钮时设置cookie，然后刷新页面。当页面再次加载时，读取cookie值并根据cookie值选择单选按钮

通过$("#divWhichExcludesRadiobutton").load("current/url");加载或在head标签中添加下一个脚本

var myVal;
$("body").load("current/url", function () { $('input[type="radio"]').val(myVal) });
$('input[type="radio"]').on('change',function(){
       myVal = $(this).attr("value");
       if($(this).attr("value")=="f1"){
           $(".box").hide();
           $(".f1").show();
       }
       if($(this).attr("value")=="f2"){
           $(".box").hide();
           $(".f2").show();
       }
       if($(this).attr("value")=="f3"){
           $(".box").hide();
           $(".f3").show();
       }
});

这是我对你的问题的解决方案:小提琴

我使用localStorage来保存哪个radioButton被退回到cookie检查:

function saveData(key,value) {
   localStorage.setItem(key,value) || (document.cookie = key + "=" + value);
}

在页面加载时，从已使用的存储中加载数据，以检查归属按钮并激活相应的框。

加上我简化了你设置活动框的功能。

如果你有什么问题，请提出来。

由于你的页面将被刷新，新的组件将被创建，你不能通过使用javascript直接持久化它们的值，值需要存储在某个地方，你可以得到你的值，并在你的新单选按钮元素重置值。

换句话说，你想在web应用程序中保存对象的状态。为了维护对象的状态，我们有许多方法，因为我们经常使用请求范围，查询字符串或会话。由于您的要求是保存值只到下一个请求(下一页刷新)，所以为了维护下一个页面加载的值，您可以使用请求范围或您需要将该值添加到您的查询字符串，在这两种方式中，您可以从请求范围或查询字符串中获得该值，并将该值应用于您的单选按钮。

如何在JavaScript页面之间传递数据?

  1. 将表单数据提交给服务器端脚本，然后该脚本输出包含该数据的新JavaScript页面。这是简单和可靠的，并在所有的浏览器工作，但需要支持服务器端脚本的某种类型(PHP, ASP等)。

  2. 将URL中的表单样式数据传递给新的JavaScript页面，而不使用任何服务器端脚本。这适用于所有浏览器，但支持的数据量有限。这是解决问题的传统方法，无需服务器端脚本。

  3. 通过window.name属性传递数据。虽然这不是window.name的预期目的，但它似乎工作得相当好，并且比第二种方法支持更大的数据量。它可以在Safari、Firefox和Internet Explorer中运行。那么为什么不使用它呢?因为它是高度不安全的!如果用户点击了一个不属于你的网站的链接，其他网站仍然可以看到存储在window.name中的数据，这从来都不是一个安全的、特定于网站的属性。因此，我强烈反对使用这种方法。

对于刷新页面，可以在jquery中使用location.reload()。为了存储所单击的单选按钮值，如果不使用server，则需要将数据存储在本地存储中。

您的JSP看起来像这样

<input type="radio" id="aa" name="Options" value="val1">radio 1
<input type="radio" id="bb" name="Options" value="val2"> radio 2
<input type="radio" id="cc" name="Options" value="val3"> radio 3
jQuery 

$(function() {
    $("input[type='"radio'"]").click(function(){
        var thisElem = $(this);
        var value = thisElem.val();
   alert('value'+value);
        localStorage.setItem("option", value);
    });
    var itemValue = localStorage.getItem("option");
    if (itemValue !== null) {
        $("input[value='""+itemValue+"'"]").click();
    }
});

加载页面时，单选按钮将不会重置，因为您正在使用本地存储来检索。

这将解决这个问题

' class="fieldLabel" valign="middle">' key="label.portin. "国家"/>:

                    <nested:present name="VoyagerSession" property="accountSummaryInfo.mspSummaryInfo.countryList">
                    <html:select tabindex="7" size="1" property="country" styleClass="field"  onchange= "Javascript:getstateList();javascript:selectPortInType();"> 
                    <bean:define id="countrylist" name="VoyagerSession" property="accountSummaryInfo.mspSummaryInfo.countryList" type="java.util.List" />
                    <html:options collection="countrylist" property="key" labelProperty="value" />
                    </html:select>
                    </nested:present>  
                    </td>
                   <td width="20%" align="<%= session.getAttribute("pageRight")%>" class="fieldLabel" valign="middle"><bean:message bundle='<%=session.getAttribute("pageBundle").toString()%>' key="label.portin.state" />:&nbsp;</td>
                   <td width="30%" valign="middle" class="field">
                    <html:select size="1" property="state" styleClass="field"> 
                      <bean:define id="statelist" name="VoyagerSession" property="accountSummaryInfo.mspSummaryInfo.stateList" type="java.util.List" />
                      <html:options collection="statelist" property="key" labelProperty="value" />
                      </html:select>
                   </td>
                </tr>
相关文章：