javascript - 基于单选按钮显示 div

Question

我的单选按钮:

<input type="radio" name="radio-269" value="Purchase Only" />
<input type="radio" name="radio-269" value="Sale Only" />
<input type="radio" name="radio-269" value="Purchase and Sale" />

然后我的div:

<div id="sale">
SALE!
</div>

<div id="purchase">
PURCHASE!
</div>

最后是我现在的 JavaScript:

<script>
$("input[name='radio-269']").change(function() {
    if ($(this).val() == "Purchase and Sale") {
       $('#purchase').removeClass("hidden");
    }
    else {
        $('#purchase').addClass("hidden");
    }
    if ($(this).val() == "Purchase Only" || $(this).val() == "Sale Only") {
       $('#purchase').removeClass("hidden");
    }
    else {
        $('#purchase').addClass("hidden");
    }
});
</script>

如何更改它以便发生以下情况:

• 当显示“仅购买”单选按钮时，仅显示 div id“购买”可见
• 当显示“Sale only”单选按钮时，仅显示 div id“sale”可见
• 当广播“购买和销售”时，div id 为“购买”并且“销售”可见

有人可以告诉我修改 JavaScript 来实现此目的的最佳方法吗？

Answer 1

在您的示例中，您的电线似乎有点交叉。这应该有效:

$("input[name='radio-269']").change(function() {

   if ($(this).val() == "Purchase Only") {
      $('#purchase').removeClass("hidden");
      $('#sale').addClass("hidden");
   }
   else if ($(this).val() == "Sale Only") {
      $('#sale').removeClass("hidden");
      $('#purchase').addClass("hidden");
   }
   else if ($(this).val() == "Purchase and Sale") {
      $('#sale').removeClass("hidden");
      $('#purchase').removeClass("hidden");
   }
});​

这是一个 JS Fiddle，显示它的工作情况:http://jsfiddle.net/yYBSV/1/