如何检查是不是在 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】：

jQuery prop() 方法提供了一种简单、有效且可靠的方法来跟踪复选框的当前状态。它在所有情况下都能很好地工作，因为每个复选框都有一个 checked 属性，用于指定其选中或未选中状态。

不要误解它与选中的属性。 checked 属性仅定义复选框的初始状态，而不是当前状态。让我们看看它是如何工作的：

<script>
    $(document).ready(function()
        $('input[type="checkbox"]').click(function()
            if($(this).prop("checked") == true)
                console.log("Checkbox is checked.");
            
            else if($(this).prop("checked") == false)
                console.log("Checkbox is unchecked.");
            
        );
    );
</script>

详解：jQuery prop()

不过，你也可以使用jQuery的is()函数。

if($("#isAgeSelected").is(':checked'))
    $("#txtAge").show();  // Age is selected - Show the Age
else
    $("#txtAge").hide();  // Age is not selected - Hide the Age

【参考方案2】：

您可以尝试复选框的change 事件来跟踪:checked 状态变化。

$("#isAgeSelected").on('change', function() 
  if ($("#isAgeSelected").is(':checked'))
    alert("checked");
  else 
    alert("unchecked");
  
);

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

【参考方案3】：

在单击时对选中或未选中的复选框进行操作。

$('#customCheck1').click(function() 
  if (this.checked) 
    console.log('checked');
   else 
    console.log('un-checked');
  
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

编辑：if (boolean == true) 不是一个很好的编程表达式，尽管 .checked 属性也可能返回其他类型变量..

最好改用.prop("checked")。它只返回true 和false。

【讨论】：

请注意，this.checked 将不适用于 Jquery 对象，如 here 所述。 This 可以工作（即$(this).is(":checked")）

【参考方案4】：

$(document).on("click","#isAgeSelected",function()
  if($(this).prop("checked") == true)
    $("#txtAge").show();
  
  else if($(this).prop("checked") == false)
    $("#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">
<input type="text" name="age" placeholder="Please enter age" />
</div>

【参考方案5】：

您好，您可以使用普通的javascript，如下所示：

document.getElementById('checkboxOption').addEventListener('click',      
   event => console.log(event.target.checked)
);

<label><input type="checkbox" id="checkboxOption">Check Option</label>

【参考方案6】：

此代码将帮助您

$('#isAgeSelected').click(function()
   console.log(this.checked);
   if(this.checked == true) 
        $("#txtAge").show();
     else 
       $("#txtAge").hide();
   
);

【参考方案7】：

在纯js复选框状态下更容易阅读

isAgeSelected.checked

function check() 
  txtAge.style.display= isAgeSelected.checked ? 'block':'none';

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

<button onclick="check()">Check</button>

<div id="txtAge" style="display:none">
Age is selected
</div>

【参考方案8】：

请尝试下面的代码来检查复选框是否被选中

$(document).ready(function()

    $("#isAgeSelected").on('change',function()

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

   );

);

【参考方案9】：

你可以试试这个代码：

$('#isAgeSelected').click(function()
   console.log(this.checked);
   if(this.checked == true) 
        $("#txtAge").show();
     else 
       $("#txtAge").hide();
   
);

【参考方案10】：

用途：

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

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

【参考方案11】：

使用纯 JavaScript：

let checkbox = document.getElementById('checkboxID');

if(checkbox.checked) 
  alert('is checked');
 else 
  alert('not checked yet');

【参考方案12】：

我需要检查复选框的选中属性并使用 jQuery 基于选中属性执行操作。

E.X -

1) 如果年龄复选框被选中，则在加载时运行以获取复选框值，然后我需要显示一个文本框来输入年龄，否则隐藏文本框。

2) 如果年龄复选框被选中，那么我需要显示一个文本框来输入年龄，否则使用复选框的单击事件隐藏文本框。

所以代码默认不返回false：

尝试以下方法：

<html>
        <head>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        </head>
        <body>
            <h1>Jquery Demo</h1>
            <input type="checkbox" name="isAge" checked id="isAge"> isAge <br/>
            <div id="Age" style="display:none">
              <label>Enter your age</label>
              <input type="number" name="age">
            </div>
            <script type="text/javascript">
            if(document.getElementById('isAge').checked) 
                $('#Age').show();
             else 
                $('#Age').hide();
               
            $('#isAge').click(function() 
                if(document.getElementById('isAge').checked) 
                    $('#Age').show();
                 else 
                    $('#Age').hide();
                
            ); 
            </script>
        </body>
    </html>

这是修改后的版本：https://jsfiddle.net/sedhal/0hygLtrz/7/

【参考方案13】：

如果您需要知道是否选中了纯javascript 中的复选框，您应该使用此代码。

let checkbox =document.getElementById('myCheckboxId');
if(checkbox.checked) 
    alert("element is checked");
 else 
    alert("element is  ot checked");

【参考方案14】：

像下面这样简单地使用它

 $('#isAgeSelected').change(function() 
     if ($(this).is(":checked"))  // or if($("#isAgeSelected").attr('checked') == true)
         $('#txtAge').show();
      else 
         $('#txtAge').hide();
     
 );

【参考方案15】：

用途：

<input type="checkbox" name="planned_checked" checked id="planned_checked"> Planned

$("#planned_checked").change(function() 
    if($(this).prop('checked')) 
        alert("Checked Box Selected");
     else 
        alert("Checked Box deselect");
    
);

    $("#planned_checked").change(function() 
        if($(this).prop('checked')) 
            alert("Checked Box Selected");
         else 
            alert("Checked Box deselect");
        
    );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" name="planned_checked" checked id="planned_checked"> Planned

【参考方案16】：

如何成功查询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 中。

【参考方案17】：

我使用的是 jQuery 1.11.1，我在设置和读取复选框值时也遇到了麻烦。

我终于通过这两个函数解决了：

function setCheckboxValue(checkBoxId, checked) 
    if (checkBoxId && (checked === true || checked === false)) 
        var elem = $('#' + checkBoxId);
        if (checked === true) 
            elem.attr('checked', 'checked');
         else 
            elem.removeAttr('checked');
        
    


function isChecked(checkBoxId) 
    return $('#' + checkBoxId).attr('checked') != null;

它可能看起来有点脏，但它解决了我在不同类型浏览器中遇到的所有有线问题。

【参考方案18】：

使用这个：

if ($('input[name="salary_in.Basic"]:checked').length > 0)

如果选中复选框，则长度大于零。

【参考方案19】：

这是做同样事情的一些不同方法：

$(document).ready(function ()

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

        // Using a pure CSS selector
        if ($(this.checked)) 
            alert('on check 1');
        ;

        // Using jQuery's is() method
        if ($(this).is(':checked')) 
            alert('on checked 2');
        ;

        //  // Using jQuery's filter() method
        if ($(this).filter(':checked')) 
            alert('on checked 3');
        ;
    );
);

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<input type="checkbox" id="isAgeSelected"/>
<div id="txtAge" style="display:none">Age is something</div>

【参考方案20】：

虽然您已针对您的问题提出了 JavaScript 解决方案（当 checkbox 为 checked 时显示 textbox），但此问题可以仅通过 css 解决。使用这种方法，您的表单适用于禁用 JavaScript 的用户。

假设您有以下 HTML：

<label for="show_textbox">Show Textbox</label>
<input id="show_textbox" type="checkbox" />
<input type="text" />

您可以使用以下 CSS 来实现所需的功能：

 #show_textbox:not(:checked) + input[type=text] display:none;

对于其他场景，您可能会想到合适的 CSS 选择器。

Here is a Fiddle to demonstrate this approach.

【参考方案21】：

一个选择器返回多个对象，它必须取数组中的第一项：

// Collection
var chckremember = $("#chckremember");


// Result boolen
var ischecked=chckremember[0].checked;

【参考方案22】：

有很多方法可以检查复选框是否被选中：

使用 jQuery 进行检查的方法

if (elem.checked)
if ($(elem).prop("checked"))
if ($(elem).is(":checked"))
if ($(elem).attr('checked'))

检查示例或文档：

http://api.jquery.com/attr/

http://api.jquery.com/prop/

【参考方案23】：

jQuery 1.6+

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

jQuery 1.5 及更低版本

$('#isAgeSelected').attr('checked')

任何版本的 jQuery

// Assuming an event handler on a checkbox
if (this.checked)

所有功劳归Xian。

【讨论】：

从技术上讲，this.checked 使用的是直接的 Javascript。但我喜欢这个跨 jQuery 版本的答案！

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

【参考方案24】：

自动化

$(document).ready(function()

    $('#isAgeSelected').change(function()
    
        alert( 'value =' + $('#chkSelect').attr('checked') );
    );
);

HTML

<b> <input type="isAgeSelected" id="chkSelect" /> Age Check </b>

<br/><br/>

<input type="button" id="btnCheck" value="check" />

jQuery

$(document).ready(function()

    $('#btnCheck').click(function()
    
        var isChecked = $('#isAgeSelected').attr('checked');

        if (isChecked == 'checked')
            alert('check-box is checked');
        else
            alert('check-box is not checked');
    )
);

Ajax

function check()

    if (isAgeSelected())
        alert('check-box is checked');
    else
        alert('check-box is not checked');


function isAgeSelected()

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

【参考方案25】：

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

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

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

【参考方案26】：

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 变量而不是直接查询复选框。

【参考方案27】：

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

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

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

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

elem.checked

或

$(elem).prop('checked')

【参考方案28】：

我正在使用这个：

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

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

【参考方案29】：

这是我认为我需要有效地执行此类操作的最少代码量。我发现这种方法很有用；它返回一个选中的复选框数组，然后您可以使用它们的值（此解决方案使用 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 + ", ";
;

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

【参考方案30】：

从本地文件系统中包含 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>

输出画面：