夏日博客

A-A+

jquery中elem.attr()无法正确判断checkbox是否选中

2016年01月11日 前端设计 暂无评论 阅读 5 views 次

有朋友问我在做表单验证时碰到elem.attr()无法正确判断checkbox是否选中问题要如何处理，下面小编来为各位介绍一下吧。

关于Jquery $(“#checked”).attr(“checked”) 无效的问题.

使用情景:使用 Jquery 实时验证 input checkbox 是否被选中？

$("#checkedElem").attr("checked") 这是一个非常简单的 Jquery 语句，意思很明显: 得到 id 为 checkedElem 的元素的 checked 属性值,但是出乎意料的是,不管 checkbox 元素是否被选中，返回的 checked 属性值总是 undefined。

Shen me gui?

这其实是一个元素属性的理解问题:元素的属性有两种形式 Properties 和 Attributes,Attributes 所指的是在html中直观的表现出来的属性，如:

  1. <input type="checkbox" />   

就是指 type 属性,元素的 Attributes 属性只会保存浏览器在渲染 html 时所赋的初始值.Properties 则是该元素所有的属性值(包括在 html 中直接写出来和没有写出来的属性值)，并且 Properties 会实时更新赋值。如: 当点击一个 checkbox 元素或者选中一个 select 元素的某个 option 时，即改变了该元素的属性值时，Properties 就会更新会当前值。

所以,如果我们并没有在 html 初始化 checked 属性的值的话，$("#checkedElem").attr("checked") 就只能得到 undefined.而如果我们在 html 初始化 checked 属性值为 checked 的话，$("#checkedElem").attr("checked") 也会一直返回 checked.

例子里面包括了一下几个功能。

  1. <input type="button" id="btn1" value="全选">  
  2. <input type="button" id="btn2" value="取消全选">  
  3. <input type="button" id="btn3" value="选中所有奇数">  
  4. <input type="button" id="btn4" value="反选">  
  5. <input type="button" id="btn5" value="获得选中的所有值">  

代码:

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  2. <HTML>  
  3.  <HEAD>  
  4.   <TITLE> New Document </TITLE>  
  5.   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
  6.     <SCRIPT LANGUAGE="JavaScript" src="/jquery.js"></script>  
  7.   <SCRIPT LANGUAGE="JavaScript">  
  8.   <!--  
  9.    $("document").ready(function(){  
  10.       
  11.     $("#btn1").click(function(){  
  12.        
  13.     $("[name='checkbox']").attr("checked",'true');//全选  
  14.     
  15.     })  
  16.        $("#btn2").click(function(){  
  17.        
  18.     $("[name='checkbox']").removeAttr("checked");//取消全选  
  19.     
  20.     })  
  21.     $("#btn3").click(function(){  
  22.        
  23.     $("[name='checkbox']:even").attr("checked",'true');//选中所有奇数  
  24.     
  25.     })  
  26.     $("#btn4").click(function(){  
  27.        
  28.     $("[name='checkbox']").each(function(){  
  29.        
  30.      
  31.      if($(this).attr("checked"))  
  32.    {  
  33.     $(this).removeAttr("checked");  
  34.       
  35.    }  
  36.    else  
  37.    {  
  38.     $(this).attr("checked",'true');  
  39.       
  40.    }  
  41.      
  42.     })  
  43.     
  44.     })  
  45.      $("#btn5").click(function(){  
  46.     var str="";  
  47.     $("[name='checkbox'][checked]").each(function(){  
  48.      str+=$(this).val()+""r"n";  
  49.    //alert($(this).val());  
  50.     })  
  51.    alert(str);  
  52.     })  
  53.    })  
  54.   //-->  
  55.   </SCRIPT>  
  56.     
  57.  </HEAD>  
  58.  <BODY>  
  59.  <form name="form1" method="post" action="">  
  60.    <input type="button" id="btn1" value="全选">  
  61.    <input type="button" id="btn2" value="取消全选">  
  62.    <input type="button" id="btn3" value="选中所有奇数">  
  63.    <input type="button" id="btn4" value="反选">  
  64.    <input type="button" id="btn5" value="获得选中的所有值">  
  65.    <br>  
  66.    <input type="checkbox" name="checkbox" value="checkbox1">  
  67.    checkbox1  
  68.    <input type="checkbox" name="checkbox" value="checkbox2">  
  69.    checkbox2  
  70.    <input type="checkbox" name="checkbox" value="checkbox3">  
  71.    checkbox3  
  72.    <input type="checkbox" name="checkbox" value="checkbox4">  
  73.    checkbox4  
  74.    <input type="checkbox" name="checkbox" value="checkbox5">  
  75.    checkbox5  
  76.    <input type="checkbox" name="checkbox" value="checkbox6">  
  77.    checkbox6  
  78.    <input type="checkbox" name="checkbox" value="checkbox7">  
  79.    checkbox7  
  80.    <input type="checkbox" name="checkbox" value="checkbox8">  
  81.  checkbox8  
  82.  </form>  

总结，$("#checkedElem").attr("checked") 应当修改 $("#checkedElem").prop("checked"), 即可实现相应效果。

标签：

给我留言