我的单选按钮:
<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 来实现此目的的最佳方法吗？
最佳答案
在您的示例中，您的电线似乎有点交叉。这应该有效:
$("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/
关于javascript - 基于单选按钮显示 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13712168/