checked属性的怪异现象

ma2jiajia 2011-07-25 09:15:47
如下代码，使用element.hasAttribute("checked")既然返回false，但这个属性确实存在啊...难道要用不同的名字(checked、CHECKED我都试过了)？？类似className这样？？求教...
测试过 IE6(XP)、IE7(XP)、其他的都是在2003系统上测试 IE8、opera 11.50、chrome 9、safari 5.0.5、firefox 3.6.18
<!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="Content-Type" content="text/html; charset=utf-8" />

    <title>hasAttribute BUG in all browser?</title>

    <script type="text/javascript" language="javascript">

      // <![CDATA[

      window.onload = function() {

        var br = "\u000d\u000a",

        str = navigator.userAgent+br,

        abc = document.getElementById("abc");

        abc.checked = true;

        try {

          str += "typeof "+(typeof abc["checked"] !== "undefined")+br;

          str += "getAttribute "+(abc.getAttribute("checked") !== null)+br;

          str += "hasAttribute "+(abc.hasAttribute("checked"))+br;

          str += "hasOwnProperty "+(abc.hasOwnProperty("checked"));

        } catch(e) {}

        document.body.appendChild(document.createElement("PRE").appendChild(document.createTextNode(str)).parentNode);

      };

      // ]]>

    </script>

  </head>

  <body>

    <input type="radio" id="abc" />

  </body>

</html>
...全文
231 17 打赏 收藏 转发到动态 举报
写回复
用AI写文章
17 条回复
切换为时间正序
请发表友善的回复…
发表回复
ma2jiajia 2011-07-26
  • 打赏
  • 举报
 回复
已解决，详情请移步
http://bbs.blueidea.com/thread-3028850-1-1.html
ma2jiajia 2011-07-25
  • 打赏
  • 举报
 回复
......
在FF 3.6.16(自己的笔记本是这个版本)中
<!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="Content-Type" content="text/html; charset=utf-8" />

    <script type="text/javascript" language="javascript">

      // <![CDATA[

      window.onload = function() {

        var abc = document.getElementById("abc");

        abc.checked = false;

        alert(hasAttr(abc, "checked"));

      };

      function hasAttr(element, name) {

        //return element.attributes[name] !== undefined;  // FF中既然返回false，IE8照样返回true

        return typeof element[name] !== "undefined";  // 2者都返回true

      }

      // ]]>

    </script>

  </head>

  <body>

    <input type="checkbox" name="abc[]" id="abc" />

  </body>

</html>
ma2jiajia 2011-07-25
  • 打赏
  • 举报
 回复
[Quote=引用 14 楼 mubeibei 的回复:]
引用 13 楼 ma2jiajia 的回复:
引用 12 楼 mubeibei 的回复:

abc.setAttribute('checked',true);
而你这个测试，是在赋值。

刚测试了下，确实...如果是直接写在标签里的，就可以获取到...
但......
abc.readOnly = true;
alert(abc.getAttribute("readOnly"))……
[/Quote]
是根据abc.attributes属性获取？？
是不是
function hasAttr(element, name) {

  return element.attributes[name] !== undefined;

}

不过这貌似和我顶楼代码的第一个判断是一样的啊... typeof element[name] !== "undefined"
MuBeiBei 2011-07-25
  • 打赏
  • 举报
 回复
[Quote=引用 13 楼 ma2jiajia 的回复:]
引用 12 楼 mubeibei 的回复:

abc.setAttribute('checked',true);
而你这个测试，是在赋值。

刚测试了下，确实...如果是直接写在标签里的，就可以获取到...
但......
abc.readOnly = true;
alert(abc.getAttribute("readOnly"));
这样却也可以取到值，浏览器是FF3.6.1……
[/Quote]

呃~·我也还真说不清楚这个是为什么。
我理解的话，就是不管拿什么属性或者赋值什么属性。最好都用Attribute这个。
为了更好的兼容
ma2jiajia 2011-07-25
  • 打赏
  • 举报
 回复
[Quote=引用 12 楼 mubeibei 的回复:]

abc.setAttribute('checked',true);
而你这个测试，是在赋值。
[/Quote]
刚测试了下，确实...如果是直接写在标签里的，就可以获取到...
但......
abc.readOnly = true;
alert(abc.getAttribute("readOnly"));
这样却也可以取到值，浏览器是FF3.6.18
如果照说getAttribute只能取到setAttrbiute设置的值和直接写在标签里的属性，那上面这代码又是.......
MuBeiBei 2011-07-25
  • 打赏
  • 举报
 回复
abc.setAttribute('checked',true);
而你这个测试，是在赋值。
MuBeiBei 2011-07-25
  • 打赏
  • 举报
 回复
var images = document.body.getElementsByTagName("img");
// Get the src attribute of the first one
var src0 = images[0].getAttribute("src");
// Get the src attribute of the second simply by reading the property
var src1 = images[1].src;

这个肯定有的，<img src="11.jpg">谁都会把src属性写在标签上，这样getAttribute就能拿到。
ma2jiajia 2011-07-25
  • 打赏
  • 举报
 回复
[Quote=引用 5 楼 mubeibei 的回复:]

用hasAttribute，必须得用setAttribute赋值才能返回true
[/Quote]
不需要啊...
http://www.w3.org/TR/1998/REC-DOM-Level-1-19981001/level-one-core.html#ID-666EE0F9

在JavaScript 权威指南(中文第五版)p783~784也有写
Element.getAttribute()
返回指定属性的字符串值
描述
方法getAttribute( )将返回一个元素的指定属性的值。注意，HTMLElement 对象定义了和每个标准 HTML 属性对应的JavaScript属性，因此，只有当你查询非标准属性的值的时候，才需要和HTML文档一起使用此方法。
在XML文档中，属性值不能直接做为元素属性，必须通过调用方法来查询它们。对于使用名字空间的XML文档来说，需要使用getAttributeNS( )方法。
例子
接下来的代码说明了两种获取HTML<img>元素的性质值的方法：
// Get all images in the document
var images = document.body.getElementsByTagName("img");
// Get the src attribute of the first one
var src0 = images[0].getAttribute("src");
// Get the src attribute of the second simply by reading the property
var src1 = images[1].src;
MuBeiBei 2011-07-25
  • 打赏
  • 举报
 回复
我FF测试结果：
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3

typeof true

getAttribute true

hasAttribute true

hasOwnProperty false
MuBeiBei 2011-07-25
  • 打赏
  • 举报
 回复
[Quote=引用 6 楼 ma2jiajia 的回复:]
引用 3 楼 mubeibei 的回复:

引用 2 楼 ma2jiajia 的回复:
引用 1 楼 mubeibei 的回复:

IE 没有hasAttribute这个方法~·

IE8有的...
IE中(IE9没测试)Element没有hasOwnProperty倒是真的


abc.setAttribute('checked',true);
你这样赋值，看看还返回fa……
[/Quote]

abc.setAttribute('checked',true);
里面写的是true
ma2jiajia 2011-07-25
  • 打赏
  • 举报
 回复
[Quote=引用 4 楼 lsw645645645 的回复:]

好像没这个属性吧
[/Quote]
http://www.w3.org/TR/REC-html40/interact/forms.html#adef-checked
ma2jiajia 2011-07-25
  • 打赏
  • 举报
 回复
[Quote=引用 3 楼 mubeibei 的回复:]

引用 2 楼 ma2jiajia 的回复:
引用 1 楼 mubeibei 的回复:

IE 没有hasAttribute这个方法~·

IE8有的...
IE中(IE9没测试)Element没有hasOwnProperty倒是真的


abc.setAttribute('checked',true);
你这样赋值，看看还返回false吗
[/Quote]
abc.setAttribute("checked", false);
你看看这样能否达到想要的效果(我上面测试的几个浏览器，除了IE、IE7外，其余全灭)
lsw645645645 2011-07-25
  • 打赏
  • 举报
 回复
好像没这个属性吧
MuBeiBei 2011-07-25
  • 打赏
  • 举报
 回复
用hasAttribute，必须得用setAttribute赋值才能返回true
MuBeiBei 2011-07-25
  • 打赏
  • 举报
 回复
[Quote=引用 2 楼 ma2jiajia 的回复:]
引用 1 楼 mubeibei 的回复:

IE 没有hasAttribute这个方法~·

IE8有的...
IE中(IE9没测试)Element没有hasOwnProperty倒是真的
[/Quote]

abc.setAttribute('checked',true);
你这样赋值，看看还返回false吗
ma2jiajia 2011-07-25
  • 打赏
  • 举报
 回复
[Quote=引用 1 楼 mubeibei 的回复:]

IE 没有hasAttribute这个方法~·
[/Quote]
IE8有的...
IE中(IE9没测试)Element没有hasOwnProperty倒是真的
MuBeiBei 2011-07-25
  • 打赏
  • 举报
 回复
IE 没有hasAttribute这个方法~·
checked属性 详解
本文详细介绍了HTML复选框中checked属性的使用，指出只要存在checked属性，无论值为何，复选框都将被视为选中状态。通过JavaScript和jQuery示例展示了如何改变复选框的选中状态，并强调设置checked值为false可以使复选框不被选中。同时，文章还提供了使用JavaScript和jQuery检查复选框是否选中的方法，以及它们返回值的区别。
html标签的checked属性详解
本文详细解析了如何使用JavaScript和jQuery控制HTML中复选框和Select元素的状态，包括如何设置和获取checked和selected属性，以及注意事项。
javascript和jquery复选框之checked属性
本文深入探讨HTML中复选框checked属性的使用，解析其在不同情况下的表现，包括默认值、JavaScript和jQuery操作方式，以及如何正确获取复选框的选中状态。
复选框之checked属性
本文详细解析了HTML中复选框的checked属性，并通过JavaScript和jQuery演示如何控制复选框的状态，同时提供了获取复选框选中状态的方法。
JavaScript

87,990

社区成员

224,684

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章