选择单选按钮后刷新页面，但保留单选按钮的值 [英] Refresh page after selecting radio button but keep the radio button value

问题描述

我正在创建一个页面，用户可以在其中单击单选按钮来选择一个选项.我希望页面刷新以保持选定的单选按钮值.这些是我的密码.

I'm creating a page where the user can select an option by clicking on a radio button. I want the page to refresh keeping the selected radio button value. These are my codes.

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

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

Is there a a way to reload just the div instead of refreshing the entire page?

推荐答案

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

If this is an HTML file, then use localStorage to store the <input> clicked by the value attribute and then when the page is loaded, run the onclick event of the right <input> element.

$(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> 并显示正确的框.

If this is run on a server, then use document.cookie to store the <input> clicked by the value attribute and when sending data to the client server-side, make the correct <input> checked and the correct box showing.

$(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/

Here's the fiddle (unfortunately, cookies don't work here): http://jsfiddle.net/NobleMushtak/vTT7J/

这篇关于选择单选按钮后刷新页面，但保留单选按钮的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！