使用 jQuery 检查checkbox是否被选中

如何使用checkbox数组的id来检查checkbox数组中的checkbox是否被选中？

我正在使用下面的代码，但它总是返回选中的复选框的数量，而不考虑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
}

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

以下所有的方法都是可能的

elem.checked 

$(elem).prop("checked") 

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

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

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

如果勾选，它将返回1；否则，它将返回0。

你可以使用这个代码、

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

根据jQuery documentation，有以下方法来检查一个复选框是否被选中。让我们考虑一个复选框的例子（检查工作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--checked

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

例子2--用jQuery是，注意--: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

我知道OP想用jquery，但在我的情况下，纯JS是答案，所以如果有人像我一样在这里，没有jquery或不想使用它--这里是JS的答案：

document.getElementById("myCheck").checked

如果ID为myCheck的input勾选了，它将返回true，如果没有勾选，则返回false。

就像这样简单。

你可以试一试这个：

<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" ) ) {};

你可以做得很简单，就像；

Fiddle

HTML

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

jQuery

$(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');
        }
    });
});

或更简单的；

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

如果checkbox被选中，就会返回true，否则就会返回undefined。

$(document).on('click','#checkBoxId',function(){
  var isChecked = $(this).is(':checked');
  console.log(isChecked);
});

上面这段代码也适用于bootstrap modal，isChecked为true或flase.IfChecked为true；

检查和设置一个复选框的简单演示。

jsfiddle!

$('.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如果复选框被选中似乎也没有作用。

到头来

<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的复选框来说

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

你可以简单地做

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

你会得到true或false作为上述语法的返回值。你可以在if子句中像普通布尔表达式一样使用它。

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

以下是语法：

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()不同，它也可以用来设置数值。

像这样的东西可以帮助

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 );
        }
    }
}

试试这个......

$(function(){
  $('body').on('click','.checkbox',function(e){
    
    if($(this).is(':checked')){
      console.log('Checked')
    } else {
      console.log('Unchecked')
    }
  })
})

切换选中的复选框

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

使用这段代码，你可以在不同的复选框组或多个复选框中检查至少一个复选框是否被选中。 使用这段代码，你可以不要求删除ID或动态ID。这段代码在相同的ID下工作。

参考链接。

<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 />

<script>
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;
}
</script>

由于现在是2019年年中，jQuery有时会被VueJS、React等东西所取代。这里有一个纯粹的vanilla Javascript的onload监听器选项：

<script>
  // Replace 'admincheckbox' both variable and ID with whatever suits.

  window.onload = function() {
    const admincheckbox = document.getElementById("admincheckbox");
    admincheckbox.addEventListener('click', function() {
      if(admincheckbox.checked){
        alert('Checked');
      } else {
        alert('Unchecked');
      }
    });
  }
</script>

你的问题不清楚：你想在输入时给"复选框数组id"，在输出时得到true/false - 这样你就不知道哪个复选框被选中了（正如你的函数名称所示）。所以下面是我对你的isCheckedById的主体的建议，它在输入时获取复选框id，在输出时返回true/false（这很简单，但你的ID不应该是关键词）、

this[id].checked

function isCheckedById(id) {
  return this[id].checked;
}



// TEST

function check() {
  console.clear()
  console.log('1',isCheckedById("myCheckbox1"));
  console.log('2',isCheckedById("myCheckbox2"));
  console.log('3',isCheckedById("myCheckbox3"));
}

<label><input id="myCheckbox1" type="checkbox">check 1</label>
<label><input id="myCheckbox2" type="checkbox">check 2</label>
<label><input id="myCheckbox3" type="checkbox">check 3</label>
<!-- label around inputs makes text clickable -->
<br>
<button onclick="check()">show checked</button>

你可以尝试任何一种首选的方式，如jQuery或JavaScript。

获取以下值，并将其分配到变量中，然后根据你的要求if-else语句。

var getVal=$('#checkbox_id').is(":checked"); // jQuery

var getVal=document.getElementById("checkbox_id").checked //JavaScript

if (getVal==true) {
 // perform task
} else {
 // perform task 
}

使用下面的代码

<script>

$(document).ready(function () {
  $("[id$='chkSendMail']").attr("onchange", "ShowMailSection()");
}

function ShowMailSection() {
  if ($("[id$='chkSendMail'][type='checkbox']:checked").length >0){
      $("[id$='SecEmail']").removeClass("Hide");
  }
</script>