Question

I am trying to make something which shows one of two divs based on the selection of a radio button. In terms of radio buttons I have this code:

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

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

My Javascript:

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

Firstly, it doesn’t work and doesnt give me an errors in console. How can I also get it show me the purcahseorsale div if “purchase” or “sale” radio button is shown?

Answer 1

You should be referring to input[name='radio-269'] instead of input[select='radio-269'].

Also, your ID selectors don’t match those of the actual DOM.

The JavaScript should be:

$("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");
    }
});

Check this JS Fiddle: http://jsfiddle.net/MrXenotype/ZpP7f/