JSFiddle - React, Tailwind, and code Playground

by Kishore Polsani

HTML

<!-- Reload page with new radio button selected
This is an example for a StackOverflow question:
     http://stackoverflow.com/questions/24697272/refresh-page-after-selecting-radio-button-but-keep-the-radio-button-value -->

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

CSS

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

JavaScript

$(function() {
	$("input[type=\"radio\"]").click(function(){
		var thisElem = $(this);
		var value = thisElem.val();
        $(".box").hide();
		$("."+value).show();
		//localStorage:
		localStorage.setItem("option", value);
		//Cookies:
		//document.cookie="option="+value;
    });
	//localStorage:
	var itemValue = localStorage.getItem("option");
	if (itemValue !== null) {
		$("input[value=\""+itemValue+"\"]").click();
	}
    /*
	//Cookies:
	var n = document.cookie;
	if (n.indexOf("option=") !== -1) {
		var cookieValue = n.substring(n.indexOf("option=")+7, n.indexOf(";"))
		$("input[value=\""+cookieValue+"\"]").click();
	}
    */
});