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

Question

我如何通过复选框数组中的id检查复选框是否被选中？

我正在使用以下代码，但它始终返回选中的复选框数量，而不管其id。

function isCheckedById(id) {
    alert(id);
    var checked = $("input[@id=" + id + "]:checked").length;
    alert(checked);

    if (checked == 0) {
        return false;
    } else {
        return true;
    }
}

- Jake

---

复选框数组表示如下所示： <input type="checkbox" name="chk[]" id="chk[]" value="apple"> <input type="checkbox" name="chk[]" id="chk[]" value="banana"> <input type="checkbox" name="chk[]" id="chk[]" value="orange">等等。 - Jake

复选框数组有什么问题吗？除此之外，你还能用什么方式实现“全选”输入？ - nickf

请确保你的 id 是唯一的！name 可以（在这种情况下应该）重复，但是如果你重复使用 id，那么会出现很多奇怪的问题！=D - Jeff Rupert

返回 checked !== 0。 - SuperStormer

可能是如何在jQuery中检查复选框是否已选中？的重复问题。 - Laurent S.

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

Answer 1

$('#' + id).is(":checked")

如果复选框被选中，就会得到这个。

对于具有相同名称的复选框数组，您可以通过以下方式获取已选中的复选框列表：

var $boxes = $('input[name=thename]:checked');

然后要循环遍历它们并查看哪些被选中，可以这样做：

$boxes.each(function(){
    // Do stuff here with this
});

要找出有多少个被选中，你可以这样做：

$boxes.length;

- John Boker

---

另一种方法是 $('#'+id).attr('checked')，它等同于 $('#' + id).is(":checked") 但在我看来更易记。 - Zubin

@Zubin：小心使用 .attr('checked')，在jQuery 1.6中它的行为已经改变。它过去会返回 false 或 true，现在返回 undefined 或 "checked"。使用.is(':checked')就不会有这个问题。 - Joey Adams

@John Boker：抱歉打扰了，但是为什么 $('.ClassName').is(':checked') 似乎不起作用，而 $('#' + id).is(":checked") 却可以？除了一个通过id查找，另一个通过类名查找的事实之外。 - Mike_OBrien

注意：自 jQuery 1.8 版本起，size() 方法已经被弃用 - 请改用 .length。 - JM4

$('#'+id).prop('checked') 将返回 true 或 false。 - nbi

Answer 2

在文档中，ID必须是唯一的，这意味着您不应该这样做：不要

<input type="checkbox" name="chk[]" id="chk[]" value="Apples" />
<input type="checkbox" name="chk[]" id="chk[]" value="Bananas" />

不要使用ID，而是通过名称或包含元素来选择它们：

<fieldset id="checkArray">
    <input type="checkbox" name="chk[]" value="Apples" />

    <input type="checkbox" name="chk[]" value="Bananas" />
</fieldset>

现在是jQuery的部分：

var atLeastOneIsChecked = $('#checkArray:checkbox:checked').length > 0;
//there should be no space between identifier and selector

// or, without the container:

var atLeastOneIsChecked = $('input[name="chk[]"]:checked').length > 0;

- nickf

---

为什么要使用 $('#checkArray :checkbox:checked').length > 0; 这样的代码，而不使用更简单的 $('#checkArray').checked 呢？后者在更多版本中都可用。 - Don Cheadle

@Oddman，它确实有效，只是不适用于jQuery对象。请尝试使用elem.checked而不是$(elem).checked。 - Dan Williams

@DanWilliams 是的，但不是在mmcrae给出的例子中。 - Oddman

@AlejandroQuiroz 我以前也不省略在jquery选择器中的双引号。但最近我认为这非常有用，因为它提高了代码可读性，并避免了名称或类包含减号“-”符号时出现错误的情况。 - dapidmini

在Chrome浏览器中，$('#checkArray').checked返回"undefined"，而document.getElementById('checkArray').checked则返回true或false。 - lisandro

Answer 3

$('#checkbox').is(':checked'); 

如果复选框被选中，以上代码返回true，否则返回false。

- Prasanna Rotti

---

使用$(this).is(':checked')时非常有用。谢谢！ - PinoyStackOverflower

这对我有用，我以前使用过这个var isChecked = $('#CheckboxID').attr('checked') ? true : false; 但并不总是返回正确的值。所以谢谢！ - leiit

Answer 4

以下所有方法都很有用:

$('#checkbox').is(":checked")

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

$('#checkbox')[0].checked

$('#checkbox').get(0).checked

建议避免使用DOM元素或行内"this.checked"，而应该使用jQuery on方法作为事件监听器。

- justnajm

Answer 5

用于检查复选框是否被选中的jQuery代码：

if($('input[name="checkBoxName"]').is(':checked'))
{
  // checked
}else
{
 // unchecked
}

或者：

if($('input[name="checkBoxName"]:checked'))
{
    // checked
}else{
  // unchecked
}

- Kundan roy

---

第一种解决方案缺少 :... 正确的写法是：if(('input[name="checkBoxName"]').is(':checked'))。 - Aerendir

缺少美元符号($)，应该是 if($('input[name="checkBoxName"]').is(':checked'))。 - Penny Liu

第二个永远不会运行“else”块，因为jQuery对象即使不包含匹配的元素也是“真实”的。在末尾添加.length，然后你就可以了。 - Heretic Monkey

谢谢！如果 ($('input[name="checkBoxName"]').is(':checked')) 能正常工作，但是 $('input[name="checkBoxName"]:checked') 却不能正常工作。 - OulinaArt

Answer 6

记住 checked 属性最重要的概念是它不对应于 checked 属性。该属性实际上对应于 defaultChecked 属性，只应用于设置复选框的初始值。checked 属性值不随复选框的状态而改变，而 checked 属性则会。因此，确定复选框是否被选中的跨浏览器兼容方法是使用属性。 以下所有方法都是可行的。

elem.checked 

$(elem).prop("checked") 

$(elem).is(":checked") 

- Techie

Answer 7

这也是我经常使用的一个想法：

var active = $('#modal-check-visible').prop("checked") ? 1 : 0 ;

如果选中，它将返回1; 否则返回0。

- Rtronic

Answer 8

您可以使用这段代码，

if($("#checkboxId").is(':checked')){
     // Code in the case checkbox is checked.
} else {
     // Code in the case checkbox is NOT checked.
}

- Mohammed Shaheen MK

Answer 9

根据jQuery 文档，有以下几种方法来检查复选框是否被选中。例如我们考虑一个复选框（在这个jsfiddle中查看所有示例）。

<input type="checkbox" name="mycheckbox" id="mycheckbox" />
<br><br>
<input type="button" id="test-with-checked" value="Test with checked" />
<input type="button" id="test-with-is" value="Test with is" />
<input type="button" id="test-with-prop" value="Test with prop" />

示例1 - 已选择

$("#test-with-checked").on("click", function(){
    if(mycheckbox.checked) {
        alert("Checkbox is checked.");
    } else {
        alert("Checkbox is unchecked.");
    }
}); 

示例2 - 使用jQuery is，注意 - :checked

var check;
$("#test-with-is").on("click", function(){
    check = $("#mycheckbox").is(":checked");
    if(check) {
        alert("Checkbox is checked.");
    } else {
        alert("Checkbox is unchecked.");
    }
}); 

示例 3 - 使用 jQuery prop

var check;
$("#test-with-prop").on("click", function(){
    check = $("#mycheckbox").prop("checked");
    if(check) {
         alert("Checkbox is checked.");
    } else {
        alert("Checkbox is unchecked.");
    }
}); 

检查工作 jsfiddle

- Subodh Ghulaxe

Answer 10

我知道楼主想要jQuery，但在我的情况下，原生JS是答案，所以如果有人和我一样没有jQuery或者不想使用它 - 这里是JS的解决方案：

document.getElementById("myCheck").checked

如果ID为myCheck的输入框被勾选了，它就返回true, 如果没有勾选就返回false。

就是这么简单。

- Combine

---

这句话的意思是 $("#myCheck")[0].checked 可以在 jQuery 中使用！ :D - Sancarn