Question

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

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而不是刷新整个页面？

Answer 1

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

$(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存储<input>属性所点击的value，并在向客户端服务器端发送数据时，进行正确的<input> {1}}选中并显示正确的框。

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

这里是小提琴（不幸的是，饼干不能在这里工作）：http://jsfiddle.net/NobleMushtak/vTT7J/

Answer 2

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

Answer 3

由于您的页面将被刷新，因此您将无法使用javascript直接创建新组件，该值需要存储在您可以稍后获取值的位置，并在新的单选按钮元素中重置值

换句话说，您希望在Web应用程序中保存对象的状态。为了维护对象的状态，我们有许多方法，因为我们经常使用请求范围，Quesy字符串或会话。因为您的要求是仅保存值直到下一个请求（下一页刷新）所以为了保持下一页加载的值，您可以使用请求范围，或者您需要将该值添加到查询字符串，这两种方式都可以从请求范围获取该值或查询字符串并将该值应用于单选按钮。

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

将表单数据提交到服务器端脚本，然后输出包含数据的新JavaScript页面。这很简单可靠，适用于所有浏览器，但需要支持某种服务器端脚本（PHP，ASP等）。
将URL中的表单样式数据传递到新的JavaScript页面，而不使用任何服务器端脚本。这适用于所有浏览器，但支持有限数量的数据。这是在没有服务器端脚本的情况下解决问题的传统方法。
通过window.name属性传递数据。虽然这不是window.name的预期目的，但它似乎工作得很好并且支持比第二种方法更大量的数据。它适用于Safari，Firefox和Internet Explorer。那么为什么不使用呢？因为它非常不安全！如果用户跟随指向不属于您的其他网站的链接，则该其他网站仍然可以看到存储在window.name中的数据，这绝不是一个安全的，特定于站点的属性。所以我强烈反对使用这种方法。

Answer 4

要刷新页面，可以在jquery location.reload（）中使用。要存储单击的单选按钮值，如果不使用服务器，则需要将数据存储在本地存储中。

Answer 5

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

Answer 6

按$("#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();
       }
});

Answer 7

以下是我的问题解决方案：Fiddle

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

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

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

另外，我简化了设置活动框的功能。

如果您有任何疑问，请随时提出。

Answer 8

您的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();
    }

});

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

这将解决问题

Answer 9

“ class =” fieldLabel“ valign =” middle“>'key =” label.portin.country“ />：

                    <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>

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

9 个答案: