jQuery hide / show div，带有单选按钮控件

Question

I have few radio buttons with same name.

Office <input type="radio" name="owner_type" value="0" />
Agent <input type="radio" name="owner_type" value="1" />

and have part of jQuery code, which must show or hide part of code.

$('[name="owner_type"]').change(function(){
    if ($('[name="owner_type"]').val() == 1) {
        alert("it's 1 now");
        $('#agents').show();
    } else {
        alert("it's 0 now");
        $('#agents').hide();
    }
});

Alerts was added for debugging. It's always alert about 0. No matter which radio is checked now. I am hope, you can help me. Thank you

Answer 1

You can do this:

$('[name="owner_type"]').change(function () {
    if ($('[name="owner_type"]:checked').val() === "1") {
        alert("it's 1 now");
        $('#agents').show();
    } else {
        alert("it's 0 now");
        $('#agents').hide();
    }
});

Actually, you are doing this:

$('[name="owner_type"]').val()

which will always fetch you the value of the first radio button, whether it's checked or not.

In order, to get the value of the checked radio button on change event you can use the :checked selector as above.

Answer 2

var $oTypes = $('input[name="owner_type"]').change(function () {
    //$('#agents').toggle($oTypes.filter(':checked').val() == 1);
    $('#agents').toggle(this.value == 1);
});

1. Use the element selector before attribute selector
2. Use toggle to set the display state

Answer 3

try something like this

            $('input[name="owner_type"]').change(function(){
                if (this.value == 1) {
                    alert("it's 1 now");
                    $('#agents').show();
                } else {
                    alert("it's 0 now");
                    $('#agents').hide();
                }
            });

Answer 4

Try this, use a :checked selector

DEMO

$('[name="owner_type"]').change(function(){
    if($('[name="owner_type"]:checked').val() == 1) {
        alert("it's 1 now");
    $('#agents').show();
    } else {
        alert("it's 0 now");
    $('#agents').hide();
    }
});