检查是不是使用 jQuery 检查了复选框

Posted 2023-03-05

【中文标题】检查是不是使用 jQuery 检查了复选框

【英文标题】：Check if checkbox is checked with jQuery检查是否使用 jQuery 检查了复选框

【发布时间】：2011-01-13 08:08:03

【问题描述】：

如何使用复选框数组的 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 是独一无二的！ name 可以（并且应该，在这种情况下）重复，但是如果你重复 id，你会发现很多奇怪的事情发生了！ =D

忽略之前的评论，应该是return checked !== 0

How to check whether a checkbox is checked in jQuery?的可能重复

【参考方案1】：

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

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

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

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

然后遍历它们，看看你能做什么检查：

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

要查找检查了多少，您可以执行以下操作：

$boxes.length;

【讨论】：

另一种方式是$('#'+id).attr('checked')，相当于$('#' + id).is(":checked")，但更容易记住IMO。

@Zubin：小心.attr('checked')。它的行为在 jQuery 1.6 中发生了变化。它曾经返回false 或true。现在它返回undefined 或"checked"。 .is(':checked')没有这个问题。

@John Boker：对于 necro 的评论很抱歉，但是，为什么 $('.ClassName').is(':checked') 似乎不起作用但 $('#' + id).is(":checked") 起作用？除了一个按 id 查找和一个按类名查找这一事实之外。

@John Boker：所以，如果我知道只有一个元素具有特定的类名，是否会将类选择器的返回视为数组工作？意思是做类似的事情：$('.ClassName')[0].is(':checked')?

注意：自 jQuery 1.8 起 size() 已被弃用 - 改用 .length

【参考方案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;

【讨论】：

当更简单的$('#checkArray').checked 工作且可用于更多版本时，为什么还要使用$('#checkArray :checkbox:checked').length > 0;？

@Oddman 它确实有效，只是不适用于 jquery 对象。而不是 $(elem).checked，试试 elem.checked。

@DanWilliams 是的，但在 mmcrae 给出的示例中没有。

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

【参考方案3】：

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

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

【讨论】：

在使用 $(this).is(':checked'); 时非常有用谢谢！

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

【参考方案4】：

你可以试试这个：

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

【讨论】：

这已经不是一个好方法了，因为attr只反映了html中的属性值，而不是DOM中的属性值。请参阅the documentation for attr，其中说“要检索和更改 DOM 属性，例如表单元素的checked、selected 或disabled 状态，请使用.prop() 方法。”和the documentation for prop，其中它说“应该使用.prop() 方法来设置disabled 和checked 而不是.attr() 方法。”

【参考方案5】：

关于 checked 属性，最重要的概念是要记住 它不对应于选中的属性。属性 实际上对应于 defaultChecked 属性，应该使用 仅用于设置复选框的初始值。选中的属性 值不会随着复选框的状态而改变，而 检查的财产确实如此。因此，跨浏览器兼容的方式 确定是否选中复选框是使用该属性

以下所有方法都可以

elem.checked 

$(elem).prop("checked") 

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

【参考方案6】：

这样的事情会有所帮助

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

【参考方案7】：

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

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

【参考方案8】：

根据 jQuery documentation，有以下方法可以检查复选框是否被选中。让我们以一个复选框为例（检查 Working jsfiddle with all examples）

<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，注意 - :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 道具

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

检查工作jsfiddle

【参考方案9】：

对于带有 id 的复选框

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

你可以这样做

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

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

【参考方案10】：

选中切换复选框

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

【参考方案11】：

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

【参考方案12】：

你可以简单地这样做；

Working 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

【讨论】：

or even simpler; -> $("#checkbox").checked

【参考方案13】：

使用下面的代码

<script>

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


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

【讨论】：

真的吗？ $(function() $("[id$='chkSendMail']").on("change", ShowMailSection); );

怎么样

【参考方案14】：

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

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

【参考方案15】：

您可以使用此代码，

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

【参考方案16】：

只是在我的示例中说情况是一个对话框，然后在关闭对话框之前验证了该复选框。以上都没有，How to check whether a checkbox is checked in jQuery? 和 jQuery if checkbox is checked 似乎也不起作用。

最后

<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 元素导致了此问题。解决方法如上。

【参考方案17】：

以下所有方法都很有用：

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

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

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

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

建议避免使用 DOMelement 或内联“this.checked”，而应使用 jQuery on 方法作为事件监听器。

【参考方案18】：

判断复选框是否被选中的jQuery代码：

if($('input[name="checkBoxName"]').is(':checked'))

  // checked
else

 // unchecked

或者：

if($('input[name="checkBoxName"]:checked'))

    // checked
else
  // unchecked

【讨论】：

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

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

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

【参考方案19】：

使用此代码，您可以检查是否在不同的复选框组或多个复选框中至少选择了一个复选框。 使用它，您可以不需要删除 ID 或动态 ID。此代码使用相同的 ID。

参考Link

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

【讨论】：

基本信息：html元素id不重复（例如：id="checkbox2", id="checkbox3"）。这不是一个好习惯。我们可以在一个页面中多次使用类。

【参考方案20】：

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

document.getElementById("myCheck").checked

如果ID为myCheck的输入被选中则返回true，如果没有被选中则返回false。

就这么简单。

【讨论】：

表示$("#myCheck")[0].checked 可以在 jquery 中工作！ :D

【参考方案21】：

从 2019 年中期开始，jQuery 有时会被 VueJS、React 等所取代。这是一个纯原生的 javascript 加载监听器选项：

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

【参考方案22】：

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

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

如果检查，它将返回 1；否则返回 0。

【参考方案23】：

您的问题不清楚：您想在输入时提供“复选框数组 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>

【参考方案24】：

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

上面的这段代码也适用于引导模式。 isChecked 是 true 还是 flase ;

【参考方案25】：

试试这个...

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