jquery 使用attr() 函数对复选框无效的原因

   复选框是网站开发的时候经常用到的网页标签之一,常见的在页面上对复选框的操作包括取值和修改复选框的状态。在jquery中,常见的操作标签的值得函数为attr,然而在操作复选框的时候,通常采用的却是prop,因为关于复选框的值,来自于properties而不是attributes。

  举个例子:

  以下代码是获取checkbox的值,并在控制台打印

  

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
 7     <script type="text/javascript">
 8         $(function () {
 9             $("#checkAll").click(function () {
10                 console.log($(this).attr("checked"))
11                 console.log($(this).prop("checked"))
12             });
13         });
14     </script>
15 </head>
16 <body>
17     <input type="checkbox" id="checkAll">全选<br/>
18
19 </body>
20 </html>

  打印的结果如图,通过attr获取到的checkbox值为undefined,prop获取到的值为true

  

  如果将checkbox的默认值设置为checked

<input type="checkbox" id="checkAll" checked>全选<br/> 

  那么得到的结果,attr获得的结果永远是checked,而prop获得的结果则还是一个布尔值。

  

  会出现这样的情况,在于attributes和properties之间的差异,函数attr获取的值来自于attributes,然而当我们在控制台查看checkbox对象的时候会发现checked的值不是在attributes中,而是在properties。

  

  通过原生js的函数,我们也可以得出相同的结果。

console.log(document.getElementById("checkAll").getAttribute(‘checked‘));
console.log(document.getElementById("checkAll").checked);//获取property 值

  

  所以,当我们对checkbox进行取值的时候,使用attr()函数获取到的值会是undefined,只能通过prop获取。

  但是,当我们使用jquery对checkbox进行赋值的时候,使用 $("#checkAll").attr("checked",true);在IE下却是可以出现效果的。不过在谷歌浏览器下则会出现另一种情况。在谷歌浏览器下,第一次赋值能够产生效果,但是在进行第二次赋值的时候,你通过查看源代码,可以发现赋值虽然在标签处会产生效果,可是在谷歌浏览器里面是显示不出来的。

  

  

  所以才会导致很多朋友在实现全选功能的时候用了attr之后,第一次全选可以实现,可是第二次全选却没办法实现的现象

  综上所述,如果使用jquery,应使用prop方法来获取和设置checked属性,不应使用attr.

 

时间: 2024-10-14 03:21:30

jquery 使用attr() 函数对复选框无效的原因的相关文章

使用jquery获取被选中checkbox复选框的值

使用jquery获取被选中checkbox复选框的值:checkbox是重要的表单元素,在很多多项选择中使用,下面就通过代码实例介绍一下如何获取复选框中所有被选中项的值,希望能够给需要的朋友带来一定的帮助.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.

jQuery分别获取选中的复选框值

function jqchk(){  //jquery获取复选框值   var s='';   $('input[name="aihao"]:checked').each(function(){     s+=$(this).val()+',';   }); 点击“提交”后,可以得到正确的选择值了,但是后面多一个,(英文逗号),这个可以检测一下再用substring去除,或者获取到复选框选择值后一般都要转成数组再使用的,所以也可以在转成数组后,去除最后一个数组元素. if (s.len

jquery获取选中的checkbox复选框的值

jquery获取选中的checkbox复选框的值:checkbox复选框是常用的表单元素之一,既然使用,一般就要获取选中的复选框的值,下面就介绍一下如何使用jQuery实现此功能.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/

javascript 操作复选框无效

<script type="text/javascript"> // 操作checkbox复选框按钮 var inputs = $('#article_list').find("input[name='articleId[]']"); $('#article_list .all_checkbox').click(function() { for(var i = 0; i < inputs.length; i++) { if($(this).is(&

jQuery中prop()函数控制多选框(全选,反选)

今天看了jQuery手册,对prop()函数又多了一点认识,记忆力不好,记录下来. prop() : 获取匹配元素集中第一个元素的值 判断checkbox中的第一个是否被选中: $(":checkbox").prop("checked"); //如果第一个checkbox被选中返回true,否则返回false. 禁用和选中页面上的所有复选框: $("input[type='checkbox']").prop("disabled"

11月8日下午Jquery取属性值(复选框、下拉列表、单选按钮)、做全选按钮、JSON存储、去空格

1.jquery取复选框的值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv

jquery怎样获取多个复选框的值?

jquery的遍历方法可以获取复选框所欲的选中值 1 2 $("input:checkbox:checked").each(function(index,element));   // 为所有选中的复选框执行函数,函数体中可以取出每个复选框的值 $("input:checkbox:checked").map(function(index,domElement)); // 将所有选中的复选框通过函数返回值生成新的jQuery 对象 实例演示:点击按钮获取checkbo

jquery如何判断checkbox(复选框)是否被选中 ...

<script type="text/javascript" src="../lib/jQuery1.11.1.js"></script> <script type="text/javascript"> $(function() { $('#myid').click(function() { alert('操作成功!'); }); }); </script> </head> <bo

JS下拉复选框的实现

<html>   <head>     <script src="jquery-1.7.2.min.js"></script>     <script src="jquery.easyui.min.js" ></script>     <link   rel="stylesheet" href="css/themes/metro/easyui.css"