如何检查是否在 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 的其他一些方法 stackoverflow.com/a/22019103/1868660
  • 为什么不$('#isAgeSelected').checked
  • 从 jquery 1.6 开始，处理属性和属性的方式发生了重大变化。对于您的情况，以下应该有效： if($('#isAgeSelected').prop("checked")) { $("#txtAge").show(); } 其他 { $("#txtAge").hide(); if 语句中的条件将根据复选框的选中/未选中状态简单地返回 true 或 false。有关更多详细信息，请参阅this 链接上的属性与属性部分。
  • 要获得全面（和正确）的答案，请参阅：stackoverflow.com/questions/426258/…
  • 由于jQuery选择器返回数组，所以可以使用$('#isAgeSelected')[0].checked

标签： javascript jquery html checkbox


【解决方案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】：

使用jQuery的is()函数：

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

【讨论】：

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

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

【讨论】：

  • 如果您在复选框旁边有一个 &lt;input type="hidden" value="0" name="checkMeOut"&gt; 则不起作用，就像几个框架一样，为了始终提交一个值。另一方面，.is(':checked') 在这种情况下有效。
【解决方案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 版本的答案！
  • 如果你在复选框旁边有一个&lt;input type="hidden" value="0" name="checkMeOut"&gt; 则不起作用，就像几个框架一样，为了始终提交一个值。另一方面，.is(':checked') 在这种情况下有效。
【解决方案5】：

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

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

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

【讨论】：

    【解决方案6】：

    用途：

    <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

    【讨论】：

      【解决方案7】：

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

      【讨论】：

        【解决方案8】：

        这对我有用：

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

        其中isAgeSelected 是控件的ID。

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

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

        【讨论】：

        • 该问题专门要求一个jQuery解决方案。
        【解决方案9】：

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

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

        if($('#isAgeSelected').prop('checked')) {
    $("#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】：

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

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

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

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

            【讨论】：

              【解决方案12】：

              您可以尝试复选框的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>

              【讨论】：

                【解决方案13】：

                我相信你可以做到：

                if ($('#isAgeSelected :checked').size() > 0)
{
    $("#txtAge").show(); 
} else { 
    $("#txtAge").hide();
}

                【讨论】：

                • 这是仅选择那些首先检查的最佳答案。 $('#isAgeSelected :checked')
                【解决方案14】：

                我决定发布一个关于如何在没有 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';

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

                【讨论】：

                  【解决方案15】：

                  我遇到了完全相同的问题。我有一个 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 将是首选方式。
                  【解决方案16】：

                  此代码将对您有所帮助

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

                  【讨论】：

                    【解决方案17】：

                    这对我有用：

                    /* isAgeSelected being id for checkbox */

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

                    【讨论】：

                      【解决方案18】：

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

                      使用 jQuery 进行检查的方法

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

                      检查示例或文档：

                      【讨论】：

                        【解决方案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】：

                          使用这个：

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

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

                          【讨论】：

                            【解决方案21】：

                            我的做法是：

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

                            【讨论】：

                              【解决方案22】： 
                              $(selector).attr('checked') !== undefined

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

                              【讨论】：

                                【解决方案23】： 
                                $(document).ready(function() {    
    $('#agecheckbox').click(function() {
        if($(this).is(":checked"))
        {
            $('#agetextbox').show();
        } else {
            $('#agetextbox').hide();
        }
    });
});

                                【讨论】：

                                  【解决方案24】：

                                  你可以使用：

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

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

                                  它们都应该工作。

                                  【讨论】：

                                    【解决方案25】：

                                    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 变量而不是直接查询复选框。
                                    【解决方案26】：

                                    这个例子是针对按钮的。

                                    尝试以下方法：

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

                                    【讨论】：

                                      【解决方案27】：

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

                                      <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 元素中。

                                      【讨论】：

                                        【解决方案28】：

                                        我正在使用这个：

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

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

                                        【讨论】：

                                          【解决方案29】：

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

                                          【讨论】：

                                            【解决方案30】：

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

                                            $('#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")）
                                            猜你喜欢
                                            相关资源
                                            最近更新 更多
                                            热门标签
                                            Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode