如何检查是不是在 jQuery 中选中了复选框？

Posted 2023-03-10

【中文标题】如何检查是不是在 jQuery 中选中了复选框？

【英文标题】：How do I check whether a checkbox is checked in jQuery?如何检查是否在 jQuery 中选中了复选框？

【发布时间】：2010-10-28 10:52:19

【问题描述】：

我需要检查一个复选框的checked 属性，并使用jQuery 根据选中的属性执行一个操作。

例如，如果age复选框被选中，那么我需要显示一个文本框来输入age，否则隐藏文本框。

但是下面的代码默认返回false：

if ($('#isAgeSelected').attr('checked')) 
  $("#txtAge").show();
 else 
  $("#txtAge").hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="isAgeSelected"/>
<div id="txtAge" style="display:none">
  Age is selected
</div>

如何成功查询checked属性？

【问题讨论】：

在这里使用 jQuery 检查其他一些方法 ***.com/a/22019103/1868660

为什么不$('#isAgeSelected').checked

从 jquery 1.6 开始，处理属性和属性的方式发生了重大变化。对于您的情况，以下应该有效： if($('#isAgeSelected').prop("checked")) $("#txtAge").show(); 其他 $("#txtAge").hide(); if 语句中的条件将根据复选框的选中/未选中状态简单地返回 true 或 false。有关更多详细信息，请参阅this 链接上的属性与属性部分。

要获得全面（和正确）的答案，请参阅：***.com/questions/426258/…

由于jQuery选择器返回数组，所以可以使用$('#isAgeSelected')[0].checked

【参考方案1】：

如何成功查询checked属性？

复选框 DOM 元素的 checked 属性将为您提供元素的 checked 状态。

鉴于您现有的代码，您可以这样做：

if(document.getElementById('isAgeSelected').checked) 
    $("#txtAge").show();
 else 
    $("#txtAge").hide();

但是，有一个更漂亮的方法可以做到这一点，使用toggle：

$('#isAgeSelected').click(function() 
    $("#txtAge").toggle(this.checked);
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="isAgeSelected"/>
<div id="txtAge" style="display:none">Age is something</div>

【讨论】：

这不是问题的答案。 this.checked 不是 jQuery，正如 OP 所要求的那样。此外，它仅在用户单击复选框时才有效，这不是问题的一部分。再次，问题是How to check whether a checkbox is checked in jQuery? 在任何给定时间，无论是否单击复选框和在 jQuery 中。

【参考方案2】：

我相信你可以做到：

if ($('#isAgeSelected :checked').size() > 0)

    $("#txtAge").show(); 
 else  
    $("#txtAge").hide();

【讨论】：

这是仅选择那些首先检查的最佳答案。 $('#isAgeSelected :checked')

【参考方案3】：

这对我有用：

$get("isAgeSelected ").checked == true

其中isAgeSelected 是控件的ID。

另外，@karim79 的 answer 工作正常。我不确定我在测试时错过了什么。

注意，这个答案使用的是 Microsoft Ajax，而不是 jQuery

【讨论】：

该问题专门要求一个jQuery解决方案。

【参考方案4】：

我正在使用它，它工作得非常好：

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

注意：如果复选框被选中，它将返回 true 否则未定义，因此最好检查“TRUE”值。

【参考方案5】：

我遇到了同样的问题，并且发布的解决方案似乎都不起作用，然后我发现这是因为 ASP.NET 将 CheckBox 控件呈现为内部带有 INPUT 的 SPAN，因此 CheckBox ID 实际上是一个 ID SPAN，不是 INPUT，所以你应该使用：

$('#isAgeSelected input')

而不是

$('#isAgeSelected')

然后上面列出的所有方法都应该有效。

【参考方案6】：

我遇到了完全相同的问题。我有一个 ASP.NET 复选框

<asp:CheckBox ID="chkBox1" CssClass='cssChkBox1' runat="server" />

在 jQuery 代码中，我使用了以下选择器来检查复选框是否被选中，它看起来就像一个魅力。

if ($("'.cssChkBox1 input[type=checkbox]'").is(':checked'))
 ...  else  ... 

我相信你也可以使用 ID 代替 CssClass，

if ($("'#cssChkBox1 input[type=checkbox]'").is(':checked'))
 ...  else  ... 

希望对你有帮助。

【讨论】：

您可以使用 css 类，只要您记住 css 类并不意味着是唯一的。如果您想响应单个元素中的更改，那么 ID 将是首选方式。

【参考方案7】：

这对我有用：

/* isAgeSelected being id for checkbox */

$("#isAgeSelected").click(function()
  $(this).is(':checked') ? $("#txtAge").show() : $("#txtAge").hide();
);

【参考方案8】：

这是一个示例，其中包括初始化显示/隐藏以匹配页面加载时复选框的状态；考虑到当您刷新页面时，firefox记住复选框的状态，但不会记住显示/隐藏元素的状态。

$(function() 
    // initialise visibility when page is loaded
    $('tr.invoiceItemRow').toggle($('#showInvoiceItems').attr('checked'));
    // attach click handler to checkbox
    $('#showInvoiceItems').click(function() $('tr.invoiceItemRow').toggle(this.checked);)
);

（在这个问题的其他答案的帮助下）

【参考方案9】：

使用jQuery的is()函数：

if($("#isAgeSelected").is(':checked'))
    $("#txtAge").show();  // checked
else
    $("#txtAge").hide();  // unchecked

【讨论】：

更干净一点的解决方案是$("#txtAge").toggle($("#isAgeSelected").is(':checked'))。

【参考方案10】：

使用 jQuery > 1.6

<input type="checkbox" value="1" name="checkMeOut" id="checkMeOut" checked="checked" />

// traditional attr
$('#checkMeOut').attr('checked'); // "checked"
// new property method
$('#checkMeOut').prop('checked'); // true

使用新的属性方法：

if($('#checkMeOut').prop('checked')) 
    // something when checked
 else 
    // something else when not

【讨论】：

如果您在复选框旁边有一个 <input type="hidden" value="0" name="checkMeOut"> 则不起作用，就像几个框架一样，为了始终提交一个值。另一方面，.is(':checked') 在这种情况下有效。

【参考方案11】：

对复选框属性使用Click 事件处理程序是不可靠的，因为checked 属性可能会在事件处理程序本身的执行过程中发生变化！

理想情况下，您希望将代码放入change 事件处理程序中，例如每次更改复选框的值时都会触发它（独立于如何这样做） .

$('#isAgeSelected').bind('change', function () 

   if ($(this).is(':checked'))
     $("#txtAge").show();
   else
     $("#txtAge").hide();
);

【参考方案12】：

我的做法是：

if ( $("#checkbox:checked").length )        
    alert("checkbox is checked");
 else 
    alert("checkbox is not checked");

【参考方案13】：

我在 Firefox 9.0.1 中验证了以下内容可用于捕获复选框后更改的状态：

$("#mycheckbox").change(function() 
    var value = $(this).prop("checked") ? 'true' : 'false';                     
    alert(value);
);

【参考方案14】：

$(selector).attr('checked') !== undefined

如果输入被检查则返回true，否则返回false。

【参考方案15】：

我决定发布一个关于如何在没有 jQuery 的情况下做同样事情的答案。就因为我是个叛逆者。

var ageCheckbox = document.getElementById('isAgeSelected');
var ageInput = document.getElementById('txtAge');

// Just because of IE <333
ageCheckbox.onchange = function() 
    // Check if the checkbox is checked, and show/hide the text field.
    ageInput.hidden = this.checked ? false : true;
;

首先，您可以通过它们的 ID 获取这两个元素。然后为复选框的onchange 事件分配一个函数，该函数检查复选框是否被选中并适当地设置年龄文本字段的hidden 属性。在该示例中使用三元运算符。

这是一个fiddle 供您测试。

附录

如果跨浏览器兼容性是个问题，那么我建议将 CSS display 属性设置为 none 和 inline。

elem.style.display = this.checked ? 'inline' : 'none';

速度较慢但跨浏览器兼容。

【参考方案16】：

自 jQuery 1.6 起，jQuery.attr() 的行为发生了变化，建议用户不要使用它来检索元素的选中状态。相反，你应该使用jQuery.prop():

$("#txtAge").toggle(
    $("#isAgeSelected").prop("checked") // For checked attribute it returns true/false;
                                        // Return value changes with checkbox state
);

另外两种可能性是：

$("#txtAge").get(0).checked
$("#txtAge").is(":checked")

【参考方案17】：

最佳答案对我没有用。不过这样做了：

<script type="text/javascript">
    $(document).ready(function()

        $("#li_13").click(function()
            if($("#agree").attr('checked'))
                $("#saveForm").fadeIn();
            
            else
            
                $("#saveForm").fadeOut();
            
        );
    );
</script>

基本上当点击元素#li_13 时，它会使用.attr('checked') 函数检查元素#agreement（即复选框）是否被选中。如果是则fadeIn 在#saveForm 元素中，如果不是fadeOut 则在saveForm 元素中。

【参考方案18】：

if( undefined == $('#isAgeSelected').attr('checked') ) 
    $("#txtAge").hide();
 else 
    $("#txtAge").show();

【参考方案19】：

if( undefined == $('#isAgeSelected').attr('checked') ) 
    $("#txtAge").hide();
 else 
    $("#txtAge").show();

【参考方案20】：

用途：

$(this).toggle($("input:checkbox", $(this))[0].checked);

当您选择脱离上下文时，请记住您需要 [0] 才能访问复选框。

【参考方案21】：

这是我的解决方法：

$('#vcGoButton').click(function () 
    var buttonStatus = $('#vcChangeLocation').prop('checked');
    console.log("Status is " + buttonStatus);
    if (buttonStatus) 
        var address = $('#vcNewLocation').val();
        var cabNumber = $('#vcVehicleNumber').val();
        $.get('postCabLocation.php',
              address: address, cabNumber: cabNumber,
              function(data) 
                  console.log("Changed vehicle " + cabNumber + " location to " + address );
              );
    
    else 
        console.log("VC go button clicked, but no location action");
    
);

【参考方案22】：

从本地文件系统中包含 jQuery。我用的是谷歌的CDN，也有很多CDN可供选择。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

只要点击mycheck 类中的复选框，代码就会执行。如果选中当前单击的复选框，则它将禁用所有其他复选框并启用当前复选框。如果当前未选中，它将再次启用所有复选框以重新选中。

<script type="text/javascript">
    $(document).ready(function() 

        var checkbox_selector = '.mycheck input[type=checkbox]';

        $(checkbox_selector).click(function() 
            if ($($(this)).is(':checked')) 

                // Disable all checkboxes
                $(checkbox_selector).attr('disabled', 'disabled');

                // Enable current one
                $($(this)).removeAttr('disabled');
            
            else 
                // If unchecked open all checkbox
                $(checkbox_selector).removeAttr('disabled');
            
        );
    );
</script>

简单的测试表格

<form method="post" action="">
    <div class="mycheck">
        <input type="checkbox" value="1" /> Television
        <input type="checkbox" value="2" /> Computer
        <input type="checkbox" value="3" /> Laptop
        <input type="checkbox" value="4" /> Camera
        <input type="checkbox" value="5" /> Music Systems
    </div>
</form>

输出画面：

【参考方案23】：

if($("#checkkBoxId").is(':checked'))
  alert("Checked=true");

或

if($("#checkkBoxId").attr('checked') == true)
  alert("checked=true");

【参考方案24】：

这是我认为我需要有效地执行此类操作的最少代码量。我发现这种方法很有用；它返回一个已选中复选框的数组，然后您可以使用它们的值（此解决方案使用 jQuery）：

// This is how you get them
var output = "";
var checkedBoxes = $("DivCheckBoxesAreIn").children("input:checked");
if(checkedBoxes.length <= 0) 
    alert('Please select check boxes');
    return false;
;

// And this is how you use them:
checkedBoxes.each(function() 
    output +=  this.value + ", ";
;

打印“输出”将为您提供一个以逗号分隔的值列表。

【参考方案25】：

如果您使用的是更新版本的 jquery，则必须使用.prop 方法来解决您的问题：

$('#isAgeSelected').prop('checked') 如果选中则返回true，如果未选中则返回false。我确认了这一点，并且我早些时候遇到了这个问题。 $('#isAgeSelected').attr('checked') 和 $('#isAgeSelected').is('checked') 正在返回 undefined，这对于这种情况来说不是一个有价值的答案。如下所示。

if($('#isAgeSelected').prop('checked')) 
    $("#txtAge").show();
 else 
    $("#txtAge").hide();

希望对您有所帮助 :)- 谢谢。

【参考方案26】：

我正在使用这个：

 <input type="checkbox" id="isAgeSelected" value="1" /> <br/>
 <input type="textbox" id="txtAge" />

 $("#isAgeSelected").is(':checked') ? $("#txtAge").show() : $("#txtAge").hide();

【参考方案27】：

用途：

<input type="checkbox" id="abc" value="UDB">UDB
<input type="checkbox" id="abc" value="Prasad">Prasad

$('input#abc').click(function()
  if($(this).is(':checked'))
  
    var checkedOne=$(this).val()
    alert(checkedOne);

    // Do some other action
  
)

如果您希望仅在选中该框而不是在您取消选中时才必须执行所需的操作，这会有所帮助。

【参考方案28】：

input type="checkbox" 的checked 属性映射到defaultChecked 属性，不 映射到checked 属性。

因此，当未选中复选框时，在页面中执行某些操作时，请改用prop() 方法。它获取属性值并随着复选框状态的变化而变化。

在这些情况下使用 attr() 或 getAttribute（在纯 JavaScript 中）不是正确的处理方式。

如果elem 是相关复选框，则执行以下操作来获取值：

elem.checked

或

$(elem).prop('checked')

【参考方案29】：

1) 如果您的 HTML 标记是：

<input type="checkbox"  />

使用的属性：

$(element).attr("checked"); // Will give you undefined as initial value of checkbox is not set

如果使用了道具：

$(element).prop("checked"); // Will give you false whether or not initial value is set

2) 如果您的 HTML 标记是：

 <input type="checkbox"  checked="checked" />// May be like this also  checked="true"

使用的属性：

$(element).attr("checked") // Will return checked whether it is checked="true"

使用的道具：

$(element).prop("checked") // Will return true whether checked="checked"

【讨论】：

这是一个真正的问题。我的解决方法 - 在输入中添加一个更改事件： 然后使用该事件更改布尔 JavaScript 变量，并使用 JavaScript 变量而不是直接查询复选框。

【参考方案30】：

我确定这不是什么启示，但我并没有在一个例子中看到全部：

所有选中复选框的选择器（在页面上）：

$('input[type=checkbox]:checked')