关于javascript：检查是否使用jQuery选中了复选框


Check if checkbox is checked with jQuery

Mi-24检查如果a是在a复选框复选框检查阵列阵列使用ID的复选框？

我用下面的代码，但它总是返回count of不论ID检查复选框。

1
2
3
4
5
6
7
8
9
10
11
function isCheckedById(id) {
  alert(id);
  var checked = $("input[@id=" + id +"]:checked").length;
  alert(checked);

  if (checked == 0) {
    return false;
  } else {
    return true;
  }
}
相关讨论

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

如果复选框被选中，则返回。

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

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

然后循环查看它们并查看检查结果，您可以执行以下操作：

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

要查找选中的数量，可以执行以下操作：

1
$boxes.length;
相关讨论

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

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

相反，删除ID，然后按名称或包含元素选择它们：

1
2
3
4
5
<fieldset id="checkArray">
    <input type="checkbox" name="chk[]" value="Apples" />

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

现在jquery：

1
2
3
4
5
6
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;
相关讨论

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

如果选中该复选框，则上述代码返回"真"，否则返回"假"。

相关讨论

以下所有方法都是有用的：

1
2
3
4
5
6
7
$('#checkbox').is(":checked")

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

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

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

建议避免使用domElement或inline"this.checked"，而应使用方法上的jquery作为事件侦听器。

jquery代码检查复选框是否选中：

1
2
3
4
5
6
7
if($('input[name="checkBoxName"]').is(':checked'))
{
  // checked
}else
{
 // unchecked
}

可选地：

1
2
3
4
5
6
if($('input[name="checkBoxName"]:checked'))
{
    // checked
}else{
  // unchecked
}
相关讨论

The most important concept to remember about the checked attribute is
that it does not correspond to the checked property. The attribute
actually corresponds to the defaultChecked property and should be used
only to set the initial value of the checkbox. The checked attribute
value does not change with the state of the checkbox, while the
checked property does. Therefore, the cross-browser-compatible way to
determine if a checkbox is checked is to use the property

以下所有方法都是可行的

1
2
3
4
5
elem.checked

$(elem).prop("checked")

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

您可以使用此代码，

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

根据jquery文档，有以下方法可以检查复选框是否被选中。例如，让我们考虑一个复选框(检查所有示例的工作jspodle)

1
2
3
4
5
<input type="checkbox" name="mycheckbox" id="mycheckbox" />

<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-选中

1
2
3
4
5
6
7
$("#test-with-checked").on("click", function(){
    if(mycheckbox.checked) {
        alert("Checkbox is checked.");
    } else {
        alert("Checkbox is unchecked.");
    }
});

示例2-使用jquery时，注意-：选中

1
2
3
4
5
6
7
8
9
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

1
2
3
4
5
6
7
8
9
var check;
$("#test-with-prop").on("click", function(){
    check = $("#mycheckbox").prop("checked");
    if(check) {
         alert("Checkbox is checked.");
    } else {
        alert("Checkbox is unchecked.");
    }
});

检查工作坐标

您可以尝试以下操作：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function checkAllCheckBox(value)
{
   if($('#select_all_').is(':checked')){
   $(".check_").attr ("checked" ,"checked" );
    }
    else
    {
        $(".check_").removeAttr('checked');
    }

 }


<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推荐的以下任何代码。

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

我知道OP想要jquery，但在我的例子中，纯JS是答案，所以如果像我这样的人在这里，没有jquery或者不想使用它-这是JS答案：

1
document.getElementById("myCheck").checked

如果选中ID为mycheck的输入，则返回true；如果未选中，则返回false。

很简单。

相关讨论

你可以像这样做；

工作小提琴

HTML

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

JQuery

1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function () {
    var ckbox = $('#checkbox');

    $('input').on('click',function () {
        if (ckbox.is(':checked')) {
            alert('You have Checked it');
        } else {
            alert('You Un-Checked it');
        }
    });
});

或者更简单；

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

如果勾选checkbox，则返回true，否则返回undefined。

相关讨论

用于检查和设置复选框的简单演示。

再见！

1
2
3
4
5
6
7
8
9
10
$('.attr-value-name').click(function() {
    if($(this).parent().find('input[type="checkbox"]').is(':checked'))
    {
        $(this).parent().find('input[type="checkbox"]').prop('checked', false);
    }
    else
    {
        $(this).parent().find('input[type="checkbox"]').prop('checked', true);
    }
});

在我的例子中，情况是一个对话框，在关闭对话框之前验证了该复选框。以上都没有，如何在jquery中检查复选框？如果勾选了复选框，jquery也不起作用。

最后

1
2
3
4
5
<input class="cb" id="rd" type="checkbox">
<input class="cb" id="fd" type="checkbox">

var fd=$('.cb#fd').is(':checked');
var rd= $('.cb#rd').is(':checked');

这样就可以调用类，然后调用ID。而不仅仅是ID。这可能是由于此页上的嵌套DOM元素导致的问题。解决方法在上面。

带ID的复选框

1
<input id="id_input_checkbox13" type="checkbox"></input>

你可以简单地做

1
$("#id_input_checkbox13").prop('checked')

您将获得true或false作为上述语法的返回值。您可以在if子句中使用它作为普通布尔表达式。

像这样可以帮助

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
togglecheckBoxs =  function( objCheckBox ) {

    var boolAllChecked = true;

    if( false == objCheckBox.checked ) {
        $('#checkAll').prop( 'checked',false );
    } else {
        $( 'input[id^="someIds_"]' ).each( function( chkboxIndex, chkbox ) {
            if( false == chkbox.checked ) {
                $('#checkAll').prop( 'checked',false );
                boolAllChecked = false;
            }
        });

        if( true == boolAllChecked ) {
            $('#checkAll').prop( 'checked',true );
        }
    }
}

实际上，根据jspef.com，DOM操作最快，然后是$().prop()，后面是$().is()！！

以下是语法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var checkbox = $('#'+id);
/* OR var checkbox = $("input[name=checkbox1]"); whichever is best */

/* The DOM way - The fastest */
if(checkbox[0].checked == true)
   alert('Checkbox is checked!!');

/* Using jQuery .prop() - The second fastest */
if(checkbox.prop('checked') == true)
   alert('Checkbox is checked!!');

/* Using jQuery .is() - The slowest in the lot */
if(checkbox.is(':checked') == true)
   alert('Checkbox is checked!!');

我个人更喜欢.prop()。与.is()不同，它也可用于设置值。

选中切换复选框

1
2
3
$("#checkall").click(function(){
    $("input:checkbox").prop( 'checked',$(this).is(":checked") );
})

使用此代码，您可以选中至少一个复选框，或不在不同的复选框组中或从多个复选框中选中。使用此选项，您不需要删除ID或动态ID。此代码使用相同的ID。

参考链路

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<label class="control-label col-sm-4">Check Box 2</label>
    <input type="checkbox" name="checkbox2" id="checkbox21" value=ck1 /> ck1<br />
    <input type="checkbox" name="checkbox2" id="checkbox22" value=ck2 /> ck2<br />

<label class="control-label col-sm-4">Check Box 3</label>
    <input type="checkbox" name="checkbox3" id="checkbox31" value=ck3 /> ck3<br />
    <input type="checkbox" name="checkbox3" id="checkbox32" value=ck4 /> ck4<br />


function checkFormData() {
    if (!$('input[name=checkbox2]:checked').length > 0) {
        document.getElementById("errMessage").innerHTML ="Check Box 2 can not be null";
        return false;
    }
    if (!$('input[name=checkbox3]:checked').length > 0) {
        document.getElementById("errMessage").innerHTML ="Check Box 3 can not be null";
        return false;
    }
    alert("Success");
    return true;
}
相关讨论

使用下面的代码

1
2
3
4
5
6
7
8
$(document).ready(function () {
  $("[id$='chkSendMail']").attr("onchange","ShowMailSection()");
}

function ShowMailSection() {
  if ($("[id$='chkSendMail'][type='checkbox']:checked").length >0){
      $("[id$='SecEmail']").removeClass("Hide");
  }
相关讨论