表格選擇處理

我有一個產品選擇頁面，您可以在其中選擇一個計劃，並且一旦選擇它，就會在div中顯示選擇信息。問題是如果頁面被刷新，彙總div消失，但它會記住你的表單選擇。我怎樣才能得到它，所以它還記得總結？表格選擇處理

<html> 
<head> 
    <script src="http://code.jquery.com/jquery-latest.min.js"></script> 

</head> 
<body> 
<script> 
$(document).ready(function(){ 
     $("div.plan").hide(); 

     $("input[type=radio]").click(function(){ 
      $("div.plan").hide(); 
      $("div[planid=" + $(this).val() +"]").show(); 
     }); 
}); 
</script> 

<input type="radio" name="plan" value="1" /> Plan 1 <br /> 
<input type="radio" name="plan" value="2" /> Plan 2 <br /> 
<input type="radio" name="plan" value="3" /> Plan 3 <br /> 

<div class="plan" planid="1">Plan 1 details</div> 
<div class="plan" planid="2">Plan 2 details</div> 
<div class="plan" planid="3">Plan 3 details</div> 

</body> 
</html>

來源

2010-11-04 Johnny

你的代碼的居留權後，可以觸發click處理所選擇的單選按鈕，這樣的：

$(document).ready(function(){ 
    $("div.plan").hide(); 

    $("input[type=radio]").click(function(){ 
     $("div.plan").hide(); 
     $("div[planid=" + $(this).val() +"]").show(); 
    }).filter(':checked').click(); 
});

這樣做是使用你已經綁定的處理程序，然後從那些元素獲取:checked之一併執行click事件處理程序，顯示正確的<div>。

另外，planid不是一個有效的屬性，如果你正在沿着這條路繼續前進並使用data- attributes，那麼你將在HTML5中有效（它們在HTML4中不存在問題）。

來源

2010-11-04 20:30:57

謝謝你完美的工作，並感謝對屬性的頭像。 – Johnny 2010-11-04 22:20:09

添加在頁面加載代碼：

$(document).ready(function(){ 
    $('input:radio:checked').each(function(){ 
    $('div[planid=' + $(this).val + ']').show(); 
    }); 
});

注意，有可能是在頁面加載閃存不被顯示的摘要。

來源

2010-11-04 20:35:09

您可以使用URL散列來維護狀態。

當選擇時，做這樣的事情：

document.location = document.location + "#P1"

當頁面重新加載，請在URL中的散列和解析什麼是在另一邊。

「＃P1」（1 =計劃1，2 =計劃2等）

然後相應地調整顯示器。

來源

2010-11-04 20:35:21

這可以用純CSS處理。

給你的單選按鈕一些類（計劃1，計劃2，計劃3等），並給你的div.plan元素一些類匹配（計劃1，計劃2，計劃3等;使用相同的類名是罰款）：

.plan { 
    display: none; 
} 

.plan-1:checked ~ .plan-1, 
.plan-2:checked ~ .plan-2, 
.plan-3:checked ~ .plan-3 { 
    display: block; 
}

當然

，這需要CSS3選擇器，JavaScript可以處理向後兼容。在CSS中使用:checked選擇器可以讓您創建純CSS切換菜單以及純CSS的手風琴效果。

來源

2010-11-04 21:05:52 zzzzBov

表格選擇處理

回答

相關問題