1

ラジオボタンの選択に基づいて、2 つの 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も表示できますか?

4

1 に答える 1

2

input[name='radio-269']の代わりに参照する必要がありinput[select='radio-269']ます。

また、ID セレクターが実際の DOM のものと一致しません。

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 Fiddle を確認してください: http://jsfiddle.net/MrXenotype/ZpP7f/

于 2012-12-04T20:41:45.470 に答える