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

Question

我有几个同名的单选按钮。

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

并拥有jQuery代码的一部分，它必须显示或隐藏部分代码。

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

添加了警报以进行调试。 它始终是关于0的警报。无论现在检查哪个无线电。 我希望，你可以帮助我。 谢谢

Answer 1

你可以这样做：

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

实际上，你这样做：

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

它总是会获取第一个单选按钮的值，无论是否已选中。

为了获得change事件上已检查单选按钮的值，您可以使用:checked选择器，如上所示。

Answer 2

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

1. 在属性选择器之前使用元素选择器
2. 使用切换来设置显示状态

Answer 3

尝试这样的事情

            $('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

试试这个，使用a :checked选择器

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