Javascript 基于单选按钮显示div

我的单选按钮：

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

$（“输入[name='radio-269']”）。更改（函数（）{
if（$（this.val（）=“购买和销售”）{
$（“#购买”）.removeClass（“隐藏”）；
}
否则{
$（“#购买”）.addClass（“隐藏”）；
}
if（$（this.val（）=“仅限购买”| |$（this.val（）==“仅限销售”）{
$（“#购买”）.removeClass（“隐藏”）；
}
否则{
$（“#购买”）.addClass（“隐藏”）；
}
});

我如何更改它，以便发生以下情况：

• 当显示收音机“仅限购买”时，仅显示div id“Purchase” 可见的
• 当显示收音机“仅限销售”时，仅显示部门id“销售” 可见的
• 当广播“购买和销售”时，部门id“购买”和 “销售”是可见的

---

有人能告诉我修改javascript以实现这一目标的最佳方法吗？

在您的示例中，您似乎有点误解了。这应该起作用：

$("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提琴，显示了它的工作原理：

您可以使用HTML-5

数据属性来保存相应的ID

<input type="radio" name="radio-269" value="Purchase Only" data-id="#purchase" />
<input type="radio" name="radio-269" value="Sale Only" data-id="#sale" />
<input type="radio" name="radio-269" value="Purchase and Sale" 
                                               data-id="#purchase,#sale"  />

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

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


​
 将javascript更改为：

$("input[name='radio-269']").change(function() {
    $('#sale, #purchase').removeClass("hidden");

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

这里有一个JSFIDLE:。
似乎您只需要修改if/else语句即可使代码正常工作。尽管我建议不要使用val（）和纯文本进行检测。如果更改html值，代码将中断。（这种情况比你想象的更频繁）

解决方案应该是这样的：

$("input[name='radio-269']").change(function() {
if ($(this).val() == "Purchase and Sale") {
   $('#purchase').show();
   $('#sale').show();
}else if ($(this).val() == "Sale Only") {
   $('#purchase').hide();
   $('#sale').show();
}else if ($(this).val() == "Purchase Only") {
   $('#purchase').show();
   $('#sale').hide();
}
});​

如果在第一个案例之后

s，我会将它们改为

else，以避免不必要地遍历所有案例。否则答案很好。如果我今天还有票数的话，我会投你更高的票：）我讨厌这样做，但当整合起来时，它似乎不起作用。这似乎不会影响到div，我用颜色突出了它们。这是我的实现吗？
$("input[name='radio-269']").change(function() {
if ($(this).val() == "Purchase and Sale") {
   $('#purchase').show();
   $('#sale').show();
}else if ($(this).val() == "Sale Only") {
   $('#purchase').hide();
   $('#sale').show();
}else if ($(this).val() == "Purchase Only") {
   $('#purchase').show();
   $('#sale').hide();
}
});​