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

如何检查是否使用复选框数组的 ID 选中了复选框数组中的复选框?

我正在使用以下代码,但是无论 ID 为何,它始终返回已选中复选框的数量。

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

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

答案

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

如果选中此复选框,则可以得到。

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

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

然后遍历它们并查看已检查的内容,您可以执行以下操作:

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

要查找已检查的数量,可以执行以下操作:

$boxes.length;

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;
$('#checkbox').is(':checked');

如果选中此复选框,则上面的代码返回 true,否则返回 false。

以下所有方法都很有用:

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

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

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

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

建议避免使用 DOMelement 或内联 “this.checked”,而应在事件侦听器中使用 jQuery on 方法。

jQuery 代码来检查复选框是否被选中:

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

或者:

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

要记住的有关选中属性的最重要概念是,它与选中属性不对应。该属性实际上对应于 defaultChecked 属性,并且应仅用于设置复选框的初始值。选中的属性值不会随着复选框的状态而改变,而选中的属性会改变。因此,确定是否选中复选框的跨浏览器兼容方法是使用属性

以下所有方法都是可能的

elem.checked 

$(elem).prop("checked") 

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

您可以使用此代码,

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

根据 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 时,注意 -:选中

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

您可以尝试以下方法:

<script>
function checkAllCheckBox(value)
{
   if($('#select_all_').is(':checked')){
   $(".check_").attr ( "checked" ,"checked" );
    }
    else
    {
        $(".check_").removeAttr('checked');
    }

 }

</script>
<input type="checkbox" name="chkbox" id="select_all_" value="1" />


<input type="checkbox" name="chkbox" class="check_" value="Apples" />
<input type="checkbox" name="chkbox" class="check_" value="Bananas" />
<input type="checkbox" name="chkbox" class="check_" value="Apples" />
<input type="checkbox" name="chkbox" class="check_" value="Bananas" />

您可以通过 jquery 使用以下任何推荐代码。

if ( elem.checked ) {};
if ( $( elem ).prop( "checked" ) ) {};
if ( $( elem ).is( ":checked" ) ) {};