我正在尝试根据选择的单选按钮制作显示两个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:
<div id="purchaseandsale" class="hidden" style="padding-top:10px; padding-bottom:10px; background-color: grey;">
Purchase and Sale
</div>
<div id="purchaseorsale" class="hidden" style="padding-top:10px; padding-bottom:10px; background-color: grey;">
Purchase or Sale
</div>
我的Javascript:
<script>
$("select[name='radio-269']").change(function() {
if ($(this).val() == "Purchase and Sale") {
$('#added_fields').removeClass("hidden");
}
else {
$('#added_fields').addClass("hidden");
}
});
</script>
首先,它不起作用,并没有在控制台中给我一个错误。如果显示“购买”或“销售”单选按钮,我怎么能让它显示purcahseorsale div?
答案 0 :(得分:2)
您应该引用input[name='radio-269']
而不是input[select='radio-269']
。
此外,您的ID选择器与实际DOM的ID选择器不匹配。
JavaScript应该是:
$("input[name='radio-269']").change(function() {
if ($(this).val() == "Purchase and Sale") {
$('#purchaseandsale').removeClass("hidden");
}
else {
$('#purchaseandsale').addClass("hidden");
}
if ($(this).val() == "Purchase Only" || $(this).val() == "Sale Only") {
$('#purchaseorsale').removeClass("hidden");
}
else {
$('#purchaseorsale').addClass("hidden");
}
});
检查这个JS小提琴:http://jsfiddle.net/MrXenotype/ZpP7f/