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

这个例子是针对按钮的。

尝试以下方法：

<input type="button" class="check" id="checkall" value="Check All" />  &nbsp; <input type="button" id="remove" value="Delete" /> <br/>

<input type="checkbox" class="cb-element"  value="1" /> Checkbox  1 <br/>
<input type="checkbox" class="cb-element"  value="2" /> Checkbox  2 <br/>
<input type="checkbox" class="cb-element"  value="3" /> Checkbox  3 <br/>


$('#remove').attr('disabled', 'disabled'); 

$(document).ready(function()   

    $('.cb-element').click(function() 

        if($(this).prop('checked'))
        
            $('#remove').attr('disabled', false);
        
        else
        
            $('#remove').attr('disabled', true);
        
    );   

    $('.check:button').click(function()

    var checked = !$(this).data('checked');
    $('input:checkbox').prop('checked', checked);
    $(this).data('checked', checked);

    if(checked == true)
    
        $(this).val('Uncheck All');
         $('#remove').attr('disabled', false);
    

    else if(checked == false)
    
        $(this).val('Check All');
        $('#remove').attr('disabled', true);
    
);
);

【参考方案2】：

二传手：

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

吸气剂：

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

【参考方案3】：

自动化

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

【参考方案4】：

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') 在这种情况下有效。

【参考方案5】：

我实际上更喜欢change 事件。

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

Demo Fiddle

【参考方案6】：

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

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

【参考方案7】：

如果您需要使用 CSS 类作为 jQuery 选择器，您可以执行以下操作：

$(document).ready(function () 
        $('.myOptionCheckbox').change(function ()             
            if ($(this).prop('checked') == true) 
                console.log("checked");           
            
            else 
                console.log("unchecked");                
            
        );
    );

它也适用于 checkboxes 和 radioboxes。

【参考方案8】：

$(document).ready(function()     
    $('#agecheckbox').click(function() 
        if($(this).is(":checked"))
        
            $('#agetextbox').show();
         else 
            $('#agetextbox').hide();
        
    );
);

【参考方案9】：

$("#isAgeSelected").prop('checked', true);

【讨论】：

这段代码可以将复选框设置为选中状态。我认为这个答案与问题无关。

【参考方案10】：

切换：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');
    ;
);

【参考方案11】：

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

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


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

【参考方案12】：

这个函数是另类且稳定的：

$('#isAgeSelected').context.checked
(return True/False)

示例：

if($('#isAgeSelected').context.checked) //if Checkbox is checked then bla bla..
    /*.....*/
else
    /*.....*/

【参考方案13】：

我认为这将是一个简单的

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

【参考方案14】：

$('#chk').change(function()  
    (this.checked)? alert('true') : alert('false');
);



($('#chk')[0].checked)? alert('true') : alert('false');

【参考方案15】：

对于旧版本的 jQuery，我不得不使用以下，

$('#change_plan').live('click', function() 
     var checked = $('#change_plan').attr('checked');
     if(checked) 
          //Code       
     
     else 
          //Code       
     
);

【参考方案16】：

虽然您已针对您的问题提出了 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.

【参考方案17】：

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

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

【参考方案18】：

试试这个，

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

【参考方案19】：

你可以使用：

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

---

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

它们都应该工作。

【参考方案20】：

if($('#isAgeSelected').prop('checked')) 
    // do your action 

【参考方案21】：

使用这个：

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

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

【参考方案22】：

用途：

<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

【参考方案23】：

这个解决方案怎么样？

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

【参考方案24】：

此代码将对您有所帮助

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

【参考方案25】：

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

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

【参考方案26】：

像下面这样简单地使用它

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

【参考方案27】：

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

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

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

使用纯 JavaScript：

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

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

【参考方案30】：

你可以试试这个代码：

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