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

Question

我需要检查复选框的checked属性，并根据它执行一个操作，使用jQuery实现。例如，如果勾选了年龄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 属性？

- Prasad

---

从jQuery 1.6开始，处理属性和属性值的方式有了显著改变。以下内容适用于您的情况： 如果 ($('#isAgeSelected').prop（“checked”））{ $（“#txtAge”）.show（）; } else { $（“#txtAge”）.hide（）; }if语句中的条件将根据复选框的选中/未选中状态简单地返回true或false。有关更多详细信息，请参阅此链接上的“属性vs属性”部分：http://api.jquery.com/prop/ - RBT

这个回答解决了你的问题吗？如何检查复选框是否被选中？ - Liam

Answer 1

如何成功查询已选择的属性？

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

- karim79

---

这不是对问题的回答。this.checked不是jQuery，正如提问者所询问的那样。此外，它只在用户单击复选框时起作用，这并不是问题的一部分。问题是：“如何在任何时候使用jQuery检查复选框是否被选中？”，无论是否单击复选框。 - Marc Compte

“is not jQuery”怎么成为一个参数呢？这种态度非常有害，也是为什么现在很难摆脱jQuery的原因！如果你可以使用早期的vanilla JavaScript，它可以在任何地方工作，并且使用起来并不更加复杂或写起来更长，那么你一定应该这样做。 - Andy

不仅如此，而且jQuery是JavaScript的扩展，因此包含了所有的JavaScript。无论如何，“this”都是一个jQuery对象，所以他完全是错的。 - John Lord

“‘is not jquery’ 怎么会成为一个参数呢？”因为虽然你确实可以在同一个脚本中同时使用jquery和纯js，但如果你只使用一种编码风格而不是两种，那么代码更易读。如果你已经接受了jquery的权衡，那么也可以使用它。 - Adriano Varoli Piazza

人们不仅仅使用jQuery来编写代码，你不能这样做。无论如何，jQuery并不是一种语言，它只是一个库。只需要看一下针对复选框的代码，就可以看出程序员们在如何设置/取消一个简单的常见控件上没有统一的想法。我刚刚修复了我们网站的一个页面，因为jQuery的版本变化导致attr方法在复选框上不再起作用。JavaScript并没有这个问题，我们之所以在项目中使用jQuery，只是因为我们的kendo库要求这样做。 - undefined

Answer 2

使用 jQuery 的 is() 函数：

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

- Bhanu Krishnan

---

一个稍微更简洁的解决方案是 $("#txtAge").toggle($("#isAgeSelected").is(':checked'))。该代码意思为：根据 #isAgeSelected 复选框的选中状态来切换显示或隐藏 #txtAge 元素。 - Kai Neuwerth

在我看来，它并不更简洁，只是更短而已。 - Jean-Roch B.

f($("#isAgeSelected").is(':checked')) - Prince

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
}

- SeanDowney

---

如果您在复选框旁边有一个<input type="hidden" value="0" name="checkMeOut">，就像一些框架那样始终提交值，那么它将无法正常工作。另一方面，.is(':checked')在这种情况下可以正常工作。 - TheStoryCoder

Answer 4

jQuery 1.6+

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

jQuery 1.5及以下版本

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

任何版本的jQuery

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

所有的功劳归于Xian。

- ungalcrys

---

从技术上讲，“this.checked”是使用纯JavaScript编写的。但我喜欢这个跨jQuery版本的答案！ - vapcguy

如果您的复选框旁边有<input type="hidden" value="0" name="checkMeOut">，就像一些框架那样，以便始终提交一个值，则不起作用。另一方面，.is(':checked')在这种情况下可以工作。 - TheStoryCoder

Answer 5

我正在使用这个，而且它完全正常工作：

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

注意：如果复选框被选中，它将返回true，否则返回undefined，因此最好检查"TRUE"值。

- Pradeep

---

attr 对我来说是未定义的，但 prop 似乎工作正常。 - sergiol

Answer 6

使用：

<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

- Lalji Dhameliya

Answer 7

自 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")

- Salman A

Answer 8

这对我有用：

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

其中isAgeSelected是控件的ID。

此外，@karim79的答案也可以正常工作。我不确定当时测试时错过了什么。

请注意，此答案使用的是Microsoft Ajax而非jQuery

- Prasad

---

这个问题明确要求使用jQuery解决方案。 - Kemuel Sanchez

这不是有关特定问题的jQuery相关信息。 - Michael Peterson

Answer 9

如果您正在使用更新版本的jquery，您必须使用.prop方法来解决您的问题：

$('#isAgeSelected').prop('checked')将返回true（选中）或false（未选中）。我确认过，早先遇到过这个问题。而$('#isAgeSelected').attr('checked')和$('#isAgeSelected').is('checked')会返回undefined，这不是一个有价值的答案。因此，请按照以下说明操作。

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

- Rajesh Omanakuttan

Answer 10

使用：

<input type="checkbox" id="abc" value="UDB">UDB
<input type="checkbox" id="abc" value="Prasad">Prasad

$('input#abc').click(function(){
  if($(this).is(':checked'))
  {
    var checkedOne=$(this).val()
    alert(checkedOne);

    // Do some other action
  }
})

如果您希望所需的操作仅在勾选复选框时执行，而不是在取消选中时立即执行，那么这可以帮助您。

- Udit Bhardwaj