Question

如何在 jQuery 中检查复选框是否被选中？

2009-05-23

4883059

javascript jquery html checkbox

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

例如，如果选中了 age 复选框，则我需要显示一个文本框来输入 age ，否则隐藏文本框。

但以下代码默认返回 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 属性？

Answer 1

How do I successfully query the checked property?

复选框 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>

Answer 2

使用 jQuery 的 is() 函数：

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

Answer 3

使用 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
}