使用jquery，切换一组单选按钮的最佳方法是什么

Question

我有一个带有下拉菜单的 aspnet-mvc 网页。下拉列表中的选项是：

• 大
• 小

在下拉列表旁边我有一系列单选按钮

      @Html.RadioButton("quantity","12",true)12  
      @Html.RadioButton("quantity","24",false)24 
      @Html.RadioButton("quantity","36",false)36 
      @Html.RadioButton("quantity","48",false)48 

当我将下拉选择更改为小时，我想拥有它，单选按钮列表更改为

      @Html.RadioButton("quantity","24",true)24
      @Html.RadioButton("quantity","48",false)48
      @Html.RadioButton("quantity","72",false)72
      @Html.RadioButton("quantity","96",false)96

如果您将下拉菜单更改回 Big，它会将单选按钮更改回上面的原始设置。

这样做的最佳方法是什么？我是否应该在页面上有两组单选按钮并隐藏与下拉列表中所选项目无关的单选按钮。有没有更优雅的方式来做到这一点？

Answer 1

看看这个工作演示。我想这就是你要找的。​​p>

Demo

标记

<select>
    <option value="big">Big</option>
    <option value="small">Small</option>
</select>

<span id="big">
<input type="radio" value="24" checked/>12
<input type="radio" value="24" />24
<input type="radio" value="24" />36
<input type="radio" value="24" />48
</span>
<span id="small" style="display:none;">
<input type="radio" value="24" checked/>24
<input type="radio" value="24" />48
<input type="radio" value="24" />72
<input type="radio" value="24" />96
</span>

Js

$(function(){
    $("select").change(function(){
        $("#big, #small").hide();
        $("#"+this.value).show();
    });
});

Answer 2

您将两个集合都放在页面上并在下拉菜单中隐藏与所选项目无关的集合的方法听起来很正确，尽管我个人会扭转局面，让所有八个单选按钮都可见并摆脱下拉菜单（大小将从选定的收音机中推断出来）。

类似这样的：

Big:    ( ) 12  ( ) 24  ( ) 36  ( ) 48
Small:  ( ) 24  ( ) 48  (o) 72  ( ) 96

如果您为它们赋予 B-24、S-24、S-96 等值。在您的操作方法中将各个部分分开是微不足道的，您不需要弄乱 javascript，而且 - 更重要的是 - 您的最终用户会喜欢一键而不是三键来选择他们的选择（一键打开下拉菜单，另一键选择选项，第三键选择单选按钮）。