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

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

$(document).ready(function()

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

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

   );

);

【讨论】：

【参考方案2】：

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

【讨论】：

【参考方案3】：

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

【讨论】：

【参考方案4】：

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

$('#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")）【参考方案5】：

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

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

&lt;label&gt;&lt;input type="checkbox" id="checkboxOption"&gt;Check Option&lt;/label&gt;

【讨论】：

【参考方案6】：

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

【讨论】：

【参考方案7】：

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