表格选择处理

我有一个产品选择页面，您可以在其中选择一个计划，并且一旦选择它，就会在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

表格选择处理

回答

相关问题