如何检查jQuery中是否选中复选框？

Question

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

例如，如果年龄复选框被选中，然后我需要显示一个文本框来输入年龄，否则隐藏文本框。

但以下代码返回假默认情况下：

if（$（'#isAgeSelected'）.attr（'checked'））{$（“#txtAge”）.show（）；}其他{$（“#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”>已选择年龄</div>

如何成功查询选中的财产？

Answer 1

如何成功查询选中的属性？

这个选中的属性将为您提供选中的元素的状态。

鉴于现有代码，您可以这样做：

if（document.getElementById（'isAgeSelected'）.checked）{$（“#txtAge”）.show（）；}其他{$（“#txtAge”）.hide（）；}

然而，有一种更漂亮的方法可以做到这一点，使用切换:

$（'#isAgeSelected'）.click（function（）{$（“#txtAge”）.togle（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”>年龄是什么

Answer 2

使用jQuery的is（）功能：

if（$（“#isAgeSelected”）.is（'：选中'））$（“#txtAge”）.show（）；//选中的其他的$（“#txtAge”）.hide（）；//未选中

Answer 3

使用jQuery>1.6

<input type=“checkbox”value=“1”name=“checkMeOut”id=“checkMeOut”check=“checked”/>//传统属性$（'#checkMeOut'）.attr（'checked'）；//“选中”//新属性方法$（'#checkMeOut'）.prop（'checked'）；//真的

使用新的属性方法：

if（$（'#checkMeOut'）.prop（'checked'））{//检查时有东西}其他{//其他东西}

Answer 4

jQuery 1.6+

$（“#isAgeSelected”）.prop（“选中”）

jQuery 1.5及以下版本

$（“#isAgeSelected”）.attr（“选中”）

jQuery的任何版本

//假设复选框上有事件处理程序if（已选中）

所有信贷都流向西安.

Answer 5

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

$（“#checkkBoxId”）.attr（“checked”）？alert（“选中”）：警报（“未选中”）；

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

Answer 6

使用：

计划$（“#planned_checked”）.change（函数（）{if（$（this）.prop（'checked'））{警报（“选中复选框”）；}其他{警报（“复选框取消选择”）；}});

$（“#planned_checked”）.change（函数（）{if（$（this）.prop（'checked'））{警报（“选中复选框”）；}其他{警报（“复选框取消选择”）；}});

<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”>计划

Answer 7

自jQuery 1.6以来jQuery.attr（）已更改，建议用户不要使用它来检索元素的选中状态。相反，您应该使用jQuery.prop（）:

$（“#txtAge”）.togle($（“#isAgeSelected”）.prop（“checked”）//对于checked属性，它返回true/false；//返回值随复选框状态更改);

另外两种可能性是：

$（“#txtAge”）.get（0）.checked$（“#txtAge”）.is（“：选中”）

Answer 8

这对我很管用：

$get（“isAgeSelected”）.checked==true

在哪里？已选择年龄是控件的id。

此外，@karim79的回答效果很好。我不确定我在测试时错过了什么。

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

Answer 9

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

$（“#isAgeSelected”）.prop（“选中”）将返回真的如果选中并且假如果未选中。我确认了这一点，我早些时候遇到了这个问题。$（“#isAgeSelected”）.attr（“选中”）和$（'#isAgeSelected'）.is（'选中'）正在返回未定义这并不是一个有价值的答案。请按照下面给出的操作。

if（$（'#isAgeSelected'）.prop（'checked'））{$（“#txtAge”）.show（）；}其他{$（“#txtAge”）.hide（）；}

Answer 10

使用：

<input type=“checkbox”id=“abc”value=“UDB”>UDB<input type=“checkbox”id=“abc”value=“Prasad”>Prasad

$（'输入#abc'）.单击（函数（）{if（$（this）.is（'：选中'））{var checkedOne=$（this）.val（）警报（checkedOne）；//做一些其他动作}})

如果您希望仅在选中该复选框而不是在删除该复选框时才必须执行所需操作，这将有所帮助。

Answer 11

你可以试试改变事件复选框以跟踪：已检查状态更改。

$（“#isAgeSelected”）.on（'change'，function（）{if（$（“#isAgeSelected”）.is（'：选中'））警报（“选中”）；其他{警报（“未检查”）；}});

<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”>已选择年龄</div>

Answer 12

使用点击checkbox属性的事件处理程序不可靠，因为选中的属性可以在事件处理程序本身的执行过程中更改！

理想情况下，您应该将代码放入改变每次更改复选框的值时都会触发事件处理程序（独立于怎样就这样做了）。

$（'#isAgeSelected'）.bind（'change'，function（）{if（$（this）.is（'：选中'））$（“#txtAge”）.show（）；其他的$（“#txtAge”）.hide（）；});

Answer 13

我遇到了完全相同的问题。我有一个ASP。NET复选框

<asp:CheckBox ID=“chkBox1”CssClass='cssChkBox1'runat=“server”/>

在jQuery代码中，我使用以下选择器来检查复选框是否被选中，它看起来就像一个魔咒。

if（$（“'.cssChkBox1 input[type=checkbox]'”）.is（'：checked'））{…}其他{…{

我相信你也可以使用ID而不是CssClass，

if（$（“'#cssChkBox1 input[type=checkbox]'”）.is（'：checked'））{…}其他{…{

我希望这对你有帮助。

Answer 14

我相信你可以做到：

if（$（'#isAgeSelected:选中'）.size（）>0）{$（“#txtAge”）.show（）；}其他{$（“#txtAge”）.hide（）；}

Answer 15

我决定发布一个关于如何在没有jQuery的情况下做同样的事情的答案。只是因为我是叛逆者。

var ageCheckbox=文档.getElementById（'isAgeSelected'）；var ageInput=document.getElementById（'textAge'）；//仅仅因为IE<333ageCheckbox.onchange=函数（）{//选中复选框并显示/隐藏文本字段。ageInput.hidden=this.checked？false：真；};

首先通过ID获取两个元素，然后指定复选框onchange（改变）事件检查复选框是否被选中并设置隐藏年龄文本字段的属性。在该示例中，使用三元运算符。

这里有一个小提琴让你来测试一下。

附录

如果跨浏览器兼容性存在问题，那么我建议设置CSS显示属性到没有人和内联.

elem.style.display=this.checked？'inline“：”none“；

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

Answer 16

此代码将帮助您

$（“#isAgeSelected”）.单击（function（）{console.log（this.checked）；if（this.checked==真）{$（“#txtAge”）.show（）；}其他{$（“#txtAge”）.hide（）；}});

Answer 17

这对我很有效：

/*isAgeSelected是复选框的id*/$（“#isAgeSelected”）点击（function（）{$（this）.是（‘：checked’）吗$（“#txtAge”）.show（）：$（“#xtAgE”）.hide（）；});

Answer 18

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

使用jQuery进行检查的方法

if（元素已选中）if（$（elem）.prop（“选中”））if（$（elem）.is（“：选中”）if（$（elem）.attr（'选中'））

检查示例或同时记录：

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

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

Answer 19

这是做同一件事的不同方法：

$（文档）.ready（函数（）{$（“#isAgeSelected”）.单击（function（）{//$（“#txtAge”）.togle（this.checked）；//使用纯CSS选择器if（$（this.checked））{警告（“检查1”）；};//使用jQuery的is（）方法if（$（this）.is（'：选中'））{警报（“未选中2”）；};////使用jQuery的filter（）方法if（$（this）.filter（'：选中'））{警报（“未选中3”）；};});});

<script src=“http://code.jquery.com/jquery-1.9.1.js“></script><input type=“checkbox”id=“isAgeSelected”/><div id=“txtAge”style=“display:none”>年龄是什么

Answer 20

使用此选项：

if（$（'input[name=“salary_in.Basic”]：选中'）.length>0）

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

Answer 21

我的做法是：

if（$（“复选框：选中”）.length）{警报（“选中复选框”）；}其他{警报（“未选中复选框”）；}

Answer 22

$（选择器）.attr（'选中'）！==未定义

这将返回真的如果输入被检查并且假如果不是的话。

Answer 23

您可以使用：

if（document.getElementById（'isAgeSelected'）.checked）$（“#txtAge”）.show（）；其他的$（“#txtAge”）.hide（）；

---

if（$（“#isAgeSelected”）.is（'：选中'））$（“#txtAge”）.show（）；其他的$（“#txtAge”）.hide（）；

两者都应该有效。

Answer 24

$（文档）.ready（函数（）{$（“#agecheckbox”）.单击（function（）{if（$（this）.is（“：选中”）{$（“#agetextbox”）.show（）；}其他{$（'#agetextbox'）.hide（）；}});});

Answer 25

1） 如果您的HTML标记是：

<input type=“checkbox”/>

使用的属性：

$（element）.attr（“checked”）；//由于未设置复选框的初始值，将为您提供未定义

如果使用道具：

$（element）.prop（“checked”）；//无论初始值是否设置，都将为您提供false

2） 如果您的HTML标记是：

<input type=“checkbox”checked=“checked”/>//可能也是这样，checked=“true”

使用的属性：

$（element）.attr（“checked”）//返回checked是否checked=“true”

使用的道具：

$（element）.prop（“checked”）//无论checked=“checked'

Answer 26

要对选中或取消选中的复选框执行操作，请单击。

$（“#customCheck1”）.单击（function（）{if（已选中）{console.log（“选中”）；}其他{console.log（“未选中”）；}});

<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js“></script><input type=“checkbox”id=“customCheck1”>

编辑：不是一个好的编程表达式if（布尔值==true）虽然.已检查属性也可能返回其他类型变量。。

最好使用.prop（“选中”）相反。它会返回真的和假只有。

Answer 27

此示例适用于按钮。

尝试以下操作：

<input type=“button”class=“check”id=“checkall”value=“check All”/><输入type=“button”id=“remove”value=“Delete”/><br/><input type=“checkbox”class=“cb-element”value=“1”/>复选框1<input type=“checkbox”class=“cb-element”value=“2”/>复选框2<input type=“checkbox”class=“cb-element”value=“3”/>复选框3$（'#remove'）.attr（'禁用'，'禁用'）；$（文档）.ready（函数（）{$（'.cb-element'）.click（函数（）{if（$（this）.prop（'checked'））{$（'#remove'）.attr（'disabled'，false）；}其他的{$（'#remove'）.attr（'disabled'，true）；}});   $（'.check:button'）.click（function（）{var checked=$（this）.数据（‘checked’）；$（'输入：复选框'）.prop（'选中'，选中）；$（this）.data（“选中”，选中）；if（选中==true）{$（this）.val（“全部取消选中”）；$（'#remove'）.attr（'disabled'，false）；}else if（选中==false）{$（this）.val（“全部选中”）；$（'#remove'）.attr（'disabled'，true）；}});});

Answer 28

最重要的答案并不是为我做的。尽管如此：

<script type=“text/javascript”>$（document）.ready（function（））{$（“#li_13”）.点击（function（）{if（$（“#agree”）.attr（“选中”））{$（“#saveForm”）.fadeIn（）；}其他的{$（“#saveForm”）.fadeOut（）；}});});</script>

基本上，当单击元素#li_13时，它会使用.attr（“选中”）功能。如果它随后在#saveForm元素中淡入淡出，如果不是淡出，则在saveForms元素中淡出。

Answer 29

尽管您已经为您的问题提出了JavaScript解决方案（显示文本框当复选框是选中的)，这个问题可以解决仅通过css使用这种方法，您的表单适用于禁用JavaScript的用户。

假设您具有以下HTML：

显示文本框<input id=“show_textbox”type=“checkbox”/><输入类型=“text”/>

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

#show_textbox:not（：checked）+input[type=text]{display:none；}

对于其他场景，您可以考虑适当的CSS选择器。

这里有一个提琴来演示这种方法.

Answer 30

我使用的是：

<input type=“checkbox”id=“isAgeSelected”value=“1”/><br/><input type=“textbox”id=“txtAge”/>$（“#isAgeSelected”）。是（'：选中'）吗$（“#txtAge”）.show（）：$（“#xtAgE”）.hide（）；