如何检查 jQuery 中是否已选中复选框?

我需要检查复选框的checked属性,并使用 jQuery 根据 checked 属性执行操作。

例如,如果选中了年龄复选框,那么我需要显示一个文本框来输入年龄,否则隐藏该文本框。

但是以下代码默认情况下返回false

if ($('#isAgeSelected').attr('checked'))
{
    $("#txtAge").show();
}
else
{
    $("#txtAge").hide();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" id="isAgeSelected"/>

<div id="txtAge" style="display:none">
Age is selected
</div>

如何成功查询checked属性?

答案

如何成功查询选中的属性?

复选框 DOM 元素的checked属性将为您提供该元素的checked状态。

给定您现有的代码,您可以执行以下操作:

if(document.getElementById('isAgeSelected').checked) {
    $("#txtAge").show();
} else {
    $("#txtAge").hide();
}

但是,使用toggle可以有一种更漂亮的方法:

$('#isAgeSelected').click(function() {
    $("#txtAge").toggle(this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="isAgeSelected"/>
<div id="txtAge" style="display:none">Age is something</div>

使用 jQuery 的is()函数:

if($("#isAgeSelected").is(':checked'))
    $("#txtAge").show();  // checked
else
    $("#txtAge").hide();  // unchecked

使用 jQuery> 1.6

<input type="checkbox" value="1" name="checkMeOut" id="checkMeOut" checked="checked" />

// traditional attr
$('#checkMeOut').attr('checked'); // "checked"
// new property method
$('#checkMeOut').prop('checked'); // true

使用新的属性方法:

if($('#checkMeOut').prop('checked')) {
    // something when checked
} else {
    // something else when not
}

jQuery 1.6 以上

$('#isAgeSelected').prop('checked')

jQuery 1.5 及以下

$('#isAgeSelected').attr('checked')

任何版本的 jQuery

// Assuming an event handler on a checkbox
if (this.checked)

一切归功于西安

我正在使用此,这绝对正常:

$("#checkkBoxId").attr("checked") ? alert("Checked") : alert("Unchecked");

注意:如果选中此复选框,它将返回 true,否则未定义,因此最好检查 “TRUE” 值。

采用:

<input type="checkbox" name="planned_checked" checked id="planned_checked"> Planned

$("#planned_checked").change(function() {
    if($(this).prop('checked')) {
        alert("Checked Box Selected");
    } else {
        alert("Checked Box deselect");
    }
});

$("#planned_checked").change(function() {
        if($(this).prop('checked')) {
            alert("Checked Box Selected");
        } else {
            alert("Checked Box deselect");
        }
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" name="planned_checked" checked id="planned_checked"> Planned

从 jQuery 1.6 开始, jQuery.attr()的行为已更改,并鼓励用户不要使用它来检索元素的选中状态。相反,您应该使用jQuery.prop()

$("#txtAge").toggle(
    $("#isAgeSelected").prop("checked") // For checked attribute it returns true/false;
                                        // Return value changes with checkbox state
);

其他两种可能性是:

$("#txtAge").get(0).checked
$("#txtAge").is(":checked")

这为我工作:

$get("isAgeSelected ").checked == true

其中isAgeSelected是控件的 ID。

另外,@ karim79 的答案也很好。我不确定测试时错过了什么。

注意,这是使用 Microsoft Ajax 而不是 jQuery 的答案

如果使用的是 jquery 的更新版本,则必须使用.prop方法来解决问题:

$('#isAgeSelected').prop('checked')如果选中则返回true ,如果未选中则返回false 。我确认了这一点,并且较早地遇到了这个问题。 $('#isAgeSelected').attr('checked')$('#isAgeSelected').is('checked')返回undefined ,对于这种情况,这不是一个有价值的答案。因此,请执行以下操作。

if($('#isAgeSelected').prop('checked')) {
    $("#txtAge").show();
} else {
    $("#txtAge").hide();
}

希望对您有所帮助:)- 谢谢。

Click事件处理程序用于 checkbox 属性是不可靠的,因为在执行事件处理程序本身的过程中, checked属性可能会更改!

理想情况下,你会希望把你的代码放到一个change的事件处理程序,例如它被激发每个复选框的值发生改变时(独立于它是如何做的话)。

$('#isAgeSelected').bind('change', function () {

   if ($(this).is(':checked'))
     $("#txtAge").show();
   else
     $("#txtAge").hide();
});