在单选按钮检查上显示div

Question

I would like to hide a div until the leased radio button is selected. This div contains input fields only relative to the leased radio selection, so hiding them when the owned radio button is selected is preferred. However, the code I have is not working.

HTML

<div id="surv_radio4">
    <p>
        Merchant Site Property is
    </p>
    <input type="radio" id="owned" value="owned" name="merchant_property"/>
    <label for="owned">Owned</label>
    <input type="radio" id="leased" value="leased" name="merchant_property"/>
    <label for="leased">Leased</label>
</div>
<div id="surv_5">
    <label for="landlord_name" class="test">Landlord Name</label>
    <input type="text" id="landlord_name" placeholder="Landlord Name"/>
    <label for="landlord_phone">Phone Number</label>
    <input type="text" id="landlord_phone" placeholder="XXX-XXX-XXXX"/>
</div>

CSS

#surv_5 {
    display: none;
}

Javascript

<script>
$(document).ready.(function() {
    $("input[name$='merchant_property']").click(function() {
        var value = $(this).val();
        if (value == 'leased') {
            $("#surv_5").show();
        } else if (value == 'owned') {
            $("#surv_5").hide();
        }
    });
});
</script>

Answer 1

Your document.ready function has a syntax error (extra period):

$(document).ready(function () {

http://jsfiddle.net/isherwood/tW3D5/

Answer 2

Try this:

$("input[name$='merchant_property']").change(function () {
    var value = $(this).val();    
    if (value == 'leased') {        
        $("#surv_5").show();
    } else {
        $("#surv_5").hide();
    }
});

Fiddle here.

Answer 3

On your original code, you also had an error on your else statement.. See fiddle here

Relevant bits below:

if (value == 'leased') {
  $("#surv_5").show();
} else if(value == 'owned'){
  $("#surv_5").hide();
}

UPDATE

Too late, looks like @Hiral has an answer for you....