jquery attr()方法获取input的checked属性问题

最新推荐文章于 2023-10-25 10:22:14 发布
原创 最新推荐文章于 2023-10-25 10:22:14 发布 · 1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#JavaScript

本文探讨了在jQuery中使用prop与attr方法获取checked属性的差异。指出当使用attr方法时，无论checked属性是否被定义，其返回值可能为undefined或'checked'，而prop方法则始终返回布尔值，更适于判断元素状态。

问题：经常使用jQuery插件的attr方法获取checked属性值，获取的值的大小为未定义，此时可以用prop方法获取其真实值，下面介绍这两种方法的区别：

1.通过prop方法获取checked属性，获取的checked返回值为boolean，选中为true,否则为flase


2.如果使用attr方法获取时，如果当前input中初始化未定义checked属性，则不管当前是否选中，$("#selectAll").attr("checked")都会返回undefined；


如果当前input中初始化已定义checked属性，则不管是否选中，$("#selectAll").attr("checked")都会返回checked.

总结，如果使用jquery,应使用prop方法来获取和设置checked属性，不应使用attr
/*
author:咔咔
wechat:fangkangfk
address:陕西西安
*/
var checked = $('#checkbox').prop('checked')

 

获取、设置input的checked属性：JQuery VS Javascript
weixin_34258838的博客
11-15 630
2019独角兽企业重金招聘Python工程师标准>>> ...
Jquery使用attr("checked")返回checked或undefined导致获取是否选中失效
TinnnnnnY
01-04 2335
Jquery中使用$('#cb').attr('checked')获取checkbox是否被选中， 返回的是checked或者是undefined，不是原来的true和false了，有关此问题的解决方法如下： 发现问题： 页面上有一个checkbox，我们期望通过Jquery来获得它是否选中，或者通过Jquery来让它被选中。  在JQ1.6之前的版本，我们会这样写我们的代码：
jquery attr方法获取input的checked属性问题
10-25
如果使用jquery,应使用prop方法来获取和设置checked属性，不应使用attr,需要的朋友可以参考下
使用attr()方法获取不到checkbox的checked属性解决方案
QINGZHID的博客
04-19 1366
使用attr()方法获取不到checkbox的checked属性解决方案   今天遇到一个全选/取消全选的功能，使用Jquery的attr()方法获取checked时发现一直undefined，而且选中/取消后再获取也是undefined。   然后上网找了一下相关资料，发现Jquery.attr()方法，记录的是元素的初始化属性（则在代码设置了默认值如：<input type="checkbox" checked>），后续这个checkbox的属性值更新后，attr()还是记录的初始化属性，而
在js中获取input check里选中的值
jiban277的专栏
11-03 5519
var namelist=document.getElementsByName("NameList"); for(i=0;i<arr.length;i++){ if(arr[i].checked){ var a = arr[i].value; } }
jquery报错$(this).attr(‘checked‘)undefined/checkbox无法改变其状态:
SunPeng的博客
08-30 470
jquery报错$(this).attr('checked')undefined/checkbox无法改变其状态:
prop与attr和checked
透明大脑
06-27 688
所使用的jquery版本为jquery-1.9.1，浏览器为Chrome 1.通过prop方法获取checked属性，获取的checked返回值为boolean，选中为true,否则为flase 全选 function checkAll() { var checkedOfAll=$("#selectAll").prop("checked"); alert(check...
Jquery attr(checked) 返回checked或undefined 获取选中失效
12-12
[removed] //获取是否选中 var isChecked = $(‘#cb’).attr(‘checked’); //设置选中 $(‘#cb’).attr(‘checked’,true); [removed] 这样写在JQ1.6之前完全没问题，可是当我们升级JQ1.6到更高的版本时，问题就...
jquery操作checked属性以及disabled属性的多种方法
10-25
### Jquery操作checked属性以及disabled属性的多种方法 #### 知识点概述： 本文主要介绍如何使用jQuery来操作HTML元素中的`checked`属性和`disabled`属性。在HTML中，`checked`属性通常用在单选按钮（radio）和复...
jQuery获取及设置表单input各种类型值的方法小结
10-22
本文对jQuery获取及设置表单input各种类型值的方法进行了详细的小结。首先，对于radio类型输入框，可以通过使用jQuery选择器获取被选中项的值，例如使用$("input[@name=items]:checked").val();可取得一组具有相同...
jquery利用attr、prop方法获取、设置input的checked属性
热门推荐
xiaouncle的博客
07-23 5万+
在jquery中应该使用prop方法来获取和设置checked属性，不应该使用attr,需要的朋友可以参考下
attr('checked', 'checked')调用多次仅第一次生效
编号0347
11-09 1360
1.问题原因JQuery从1.6开始，使用attr()获取这些属性的返回值为String类型，如果被选中(或禁用)就返回checked、selected或disabled，否则(即元素节点没有该属性)返回undefined。并且，在某些版本中，这些属性值表示文档加载时的初始状态值，即使之后更改了这些元素的选中(或禁用)状态，对应的属性值也不会发生改变。2.解决方法使用prop(‘checked’,’
在使用jquery时attr("checked") 返回checked或undefined 原因以及解决方法
bandenger的博客
05-29 1954
问题：在使用jquery时attr("checked") 返回checked或undefined ？演示代码如下：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt
checkbox利用JQuer中 attr('checked', true)设置状态只有第一次有用
山水子农
12-18 4925
在JQuery中可以使用attr()来访问对象的属性，但是在某些时候，比如访问input的disabled属性的时候，会有些问题。在有的浏览器中，只要写了disabled属性就可以，有的则要写：disabled="disabled"。所以JQuery提供了新的方法prop()来获取这些属性，使用prop()的时候，返回值是标准属性：true/false，不会回返“disabled”或者“”。那么，
attr 设置checked无效的问题
zcaixx的博客
12-29 783
1、attr()和prop()的区别 attr()方法主要是用来处理自定义的DOM属性； prop()方法主要是用来处理本身就带有的固有属性，W3C标准里面说明的属性，或者在IDE里面能够智能提示的属性，都是固 有属性，可以结合这篇文章一起看：http://blog.csdn.net/tangxiujiang/article/details/76735188 2、什么时候使用它们呢 具...
通过attr 动态设置CheckBox的checked属性，会出现第二次设置cheked属性不起作用的情况
qq_43746825的博客
11-21 404
通过attr 动态设置CheckBox的checked属性，会出现第二次设置cheked属性不起作用的情况
使用attr()设置checked属性时，第二次不起作用
云_飞扬
12-06 3283
使用attr()设置复选框checked属性时，在jquery 1.8.3版本中没有问题，但是在jquery 1.10.2版本中，第一次可以使用，第二次不能使用。 解决方法：使用prop属性代替attr属性 一、Attr 除 checked, selected, 或 disabled状态属性外，其余的属性均可用attr()设置和修改。 $("img").attr("src"
jQuery判断checked的三种方法
tianxianghuiwei的博客
10-25 2813
2 .attr(‘checked’): //看版本1.6+返回:”checked”或”undefined”;4 .is(‘:checked’): //所有版本:true/false//别忘记冒号哦。有这种哦:$(“#cb1″).prop(“checked”,”checked”);//函数返回true或false。会返回true，否则返回false。
jquery 设置input的checkbox属性为checked
最新发布
04-09
<think>好的，用户想知道如何使用jQuery将复选框设置为选中状态。我需要回忆一下相关的jQuery方法。 首先，我记得jQuery中设置属性通常用attr()方法。比如，设置checked属性为"checked"，应该像这样：$('selector').attr('checked', 'checked')。不过，用户提供的引用[1]中提到，使用attr()方法可以获取或设置属性。但可能在某些情况下，比如动态操作时，prop()方法更可靠，比如在jQuery 1.6之后，推荐用prop()来处理布尔属性，如checked、selected等。不过用户给的例子中引用[1]和[2]都用了attr()，所以可能需要说明两种方法。 另外，用户提供的引用[2]中有一个例子，使用了attr('checked','checked')来设置复选框选中。这说明在jQuery UI的dialog打开事件中，他们用这种方式设置。所以用户可能需要兼容旧版本的情况，或者在某些情况下attr()仍然有效。 然后，引用[3]中的表单提交处理，可能涉及到动态生成的复选框，但这里的问题主要是设置checked状态，所以暂时不需要处理动态元素的问题。引用[4]是关于移除disabled属性，和设置checked无关，但可能说明用户对jQuery操作属性有基本了解。 现在需要确认的是，正确的方法是什么。根据jQuery的最佳实践，对于布尔属性如checked，应该使用prop()方法，因为checked是一个属性/特性，而不是属性值。例如，$('#checkbox').prop('checked', true)会更直接有效，特别是在处理跨浏览器兼容性问题时。而attr()方法可能在旧版本的jQuery中有效，但在某些情况下可能无法正确反映元素的状态变化，特别是在动态操作时。 因此，回答中应该提到两种方法，但推荐使用prop()。需要比较两者的区别，并给出示例代码。比如，设置选中可以用.prop('checked', true)，取消选中则用.prop('checked', false)。而使用attr()的话，则是设置属性值为'checked'，或者移除该属性。 同时，用户的问题可能涉及到如何根据条件来设置复选框的状态，比如在对话框打开时根据某个值来设置。例如，在引用[2]中的例子，他们在对话框打开事件中检查某个隐藏值，然后设置复选框的checked属性。 总结，回答的结构应该是：首先介绍两种方法（attr和prop），解释它们的区别，推荐使用prop()，并提供示例代码。同时，可以提到在特定情况下（如动态创建的元素或表单处理）需要注意的地方，比如引用[3]中的处理方式可能需要在表单提交时处理隐藏的复选框，但用户的问题主要是设置checked状态，因此重点在prop和attr的使用。 最后，生成相关问题，比如如何获取复选框的状态，或者如何处理多个复选框，以及可能遇到的常见问题，比如为什么用attr有时不生效，这可以引导用户进一步了解prop和attr的区别。</think>要使用jQuery将复选框设置为选中状态，可以通过以下两种方法实现： ### 方法一：使用`prop()`方法（推荐） ```javascript // 设置选中状态 $('#checkboxID').prop('checked', true); // 取消选中状态 $('#checkboxID').prop('checked', false); ``` `prop()`方法直接操作DOM元素的属性，能准确反映复选框的实际状态，适用于所有jQuery版本（1.6+）[^1]。 ### 方法二：使用`attr()`方法 ```javascript // 设置选中状态 $('#checkboxID').attr('checked', 'checked'); // 取消选中状态 $('#checkboxID').removeAttr('checked'); ``` `attr()`方法修改HTML属性，但在动态交互中可能出现状态不同步的情况，适合静态页面操作[^2]。 ### 完整示例 ```html <input type="checkbox" id="agree"> <button onclick="$('#agree').prop('checked', true)">勾选协议</button> ``` ### 常见场景 1. **表单初始化时设置默认值** 在对话框打开事件中设置复选框： ```javascript $("#fModal").dialog({ open: function() { if(shouldCheck) { $(".row-form input[type='checkbox']").prop('checked', true); } } }); ``` 2. **动态表格操作** 处理表单提交时同步所有复选框状态： ```javascript $('#form').submit(function() { $('input[type="checkbox"]').each(function() { if(!$.contains(document, this) && this.checked) { $(this).clone().attr('type', 'hidden').appendTo(this.form); } }); }); ``` ### 注意事项 - 使用`prop()`时传递布尔值，而`attr()`需要字符串参数 - 对于动态生成的元素，需确保DOM加载完成后执行操作 - 批量操作建议使用类选择器，如`$('.check-group').prop('checked', true)`
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

咔咔-

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值