라디오 버튼을 선택한 후 페이지를 새로 고침하지만 라디오 버튼 값을 유지하십시오.

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

있습니까?

Answer 1

, 다음 value 속성에 의해 페이지가로드 될 때 다음 오른쪽 <input> 요소의 onclick 이벤트를 실행 클릭 한 <input>를 저장하는 localStorage를 사용합니다.

$(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> 올바른 상자를 보여주는합니다.

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

페이지가 새로 고침 될 때마다 새 구성 요소가 만들어 지므로 자바 스크립트를 사용하여 직접 값을 유지할 수 없으며 값을 나중에 가져 와서 새 라디오 버튼의 값을 재설정 할 수있는 위치에 저장해야합니다. 요소.

다른 말로하면 웹 응용 프로그램에 개체의 상태를 저장하고 싶습니다. 개체의 상태 유지를 위해 우리는 종종 요청 범위, Quesy 문자열 또는 세션을 사용하므로 많은 방법이 있습니다. 요구 사항은 값을 저장하는 것입니다. 다음 요청 (다음 페이지 새로 고침)까지만 다음 페이지로드에 대한 값을 유지 관리하기위한 목적으로 요청 범위를 사용할 수 있거나 쿼리 문자열에 해당 값을 추가해야합니다. 두 가지 방법으로 요청에서 그 값을 얻을 수 있습니다 범위 또는 쿼리 문자열을 선택하고 해당 값을 라디오 버튼에 적용합니다.

어떻게하면 JavaScript 페이지간에 데이터를 전달합니까?

1. 다음 데이터를 포함하는 새로운 자바 스크립트 페이지를 출력하는 서버 측 스크립트 형태로 데이터를 제출. 이것은 간단하고 신뢰할 수 있으며 모든 브라우저에서 작동하지만 일종의 서버 측 스크립팅 (PHP, ASP 등)에 대한 지원이 필요합니다.

2. 서버 측 스크립트를 사용하지 않고 URL의 양식 스타일 데이터를 새 JavaScript 페이지로 전달. 이것은 모든 브라우저에서 작동하지만 제한된 양의 데이터를 지원합니다. 이는 서버 측 스크립팅없이 문제를 해결하는 전통적인 방법입니다.

3. window.name 등록 정보를 통해 데이터를 전달합니다. 이것은 window.name의 의도 된 목적은 아니지만, 꽤 잘 작동하는 것으로 보이며 두 번째 방법보다 많은 양의 데이터를 지원합니다. Safari, Firefox 및 Internet Explorer에서도 작동합니다. 그럼 왜 그것을 사용하지? 그것은 매우 불안하기 때문에! 사용자가 소유하지 않은 다른 웹 사이트에 대한 링크를 따라 간다면, 다른 웹 사이트는 window.name에 저장된 데이터를 계속 볼 수 있습니다.이 데이터는 안전한 사이트 별 속성이 아닙니다. 따라서이 방법을 사용하지 않는 것이 좋습니다.

Answer 4

페이지를 새로 고치려면 jquery location.reload()에서 사용할 수 있습니다. 클릭 한 라디오 버튼 값을 저장하려면 서버를 사용하지 않는 경우 로컬 저장소에 데이터를 저장해야합니다.이 HTML 파일 인 경우

Answer 5

당신은 쿠키 선택 라디오 버튼을 설정 한 다음 페이지를 새로 고칠 수 있습니다. 페이지가 다시로드되면 쿠키 값을 읽고 쿠키 값에 따라 라디오 버튼을 선택합니다. Fiddle

내가 라디오 버튼 쿠키에 대한 대체으로 확인되는 저장 로컬 스토리지를 사용 :

Answer 6

로드 $("#divWhichExcludesRadiobutton").load("current/url");하거나 헤드 태그 여기

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

에 다음 스크립트를 추가하여 문제에 대한 내 솔루션입니다 :

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

페이지로드시 데이터가 사용 된 저장소에서로드되어 소속 버튼을 확인하고 approp를 활성화합니다. 증오 상자.

플러스 나는 활성 상자를 설정하는 기능을 단순화했습니다.

질문이 있으시면 언제든지 문의하십시오.