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

切换：0/1 否则

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

    $('#nolunch').change(function () 
    if ($(this).is(':checked')) 
        $('#checklunch').val('1');
    ;
    if ($(this).is(':checked') == false) 
        $('#checklunch').val('0');
    ;
);

【参考方案2】：

我认为这将是一个简单的

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

【参考方案3】：

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

$(document).ready(function()

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

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

   );

);

【参考方案4】：

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

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

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

【参考方案5】：

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

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

【参考方案6】：

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

或

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

【参考方案7】：

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

输出画面：

【参考方案8】：

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

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

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

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

elem.checked

或

$(elem).prop('checked')

【参考方案9】：

自动化

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

【参考方案10】：

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

【参考方案11】：

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

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

【参考方案12】：

像下面这样简单地使用它

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

【参考方案13】：

使用纯 JavaScript：

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

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

【参考方案14】：

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

$('#isAgeSelected input')

而不是

$('#isAgeSelected')

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

【参考方案15】：

这是一个示例，其中包括初始化显示/隐藏以匹配页面加载时复选框的状态；考虑到当您刷新页面时，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);)
);

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

【参考方案16】：

这是我的解决方法：

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

【参考方案17】：

二传手：

$("#chkmyElement")[0].checked = true;

吸气剂：

if($("#chkmyElement")[0].checked) 
   alert("enabled");
 else 
   alert("disabled");

【参考方案18】：

用途：

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

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

【参考方案19】：

我实际上更喜欢change 事件。

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

Demo Fiddle

【参考方案20】：

试试这个，

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

【参考方案21】：

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

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


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

【参考方案22】：

我使用的是 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;

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

【参考方案23】：

你可以试试这个代码：

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

【参考方案24】：

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

【参考方案25】：

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

【参考方案26】：

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

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

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

【参考方案27】：

这个解决方案怎么样？

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

【参考方案28】：

我需要检查复选框的选中属性并使用 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/

【参考方案29】：

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

【参考方案30】：

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

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