IE6,IE7下checkbox选中问题

最新推荐文章于 2021-06-03 20:35:12 发布

最新推荐文章于 2021-06-03 20:35:12 发布 · 191 阅读

文章标签：

#ie6 #ie7下checkbox

JavaScript 专栏收录该内容

27 篇文章

订阅专栏

本文探讨了在不同浏览器环境下（包括IE6/7/8及Firefox）进行DOM操作时遇到的兼容性问题，特别是针对Checkbox元素的处理。通过实例展示了如何逐层创建DOM节点，并将Checkbox元素正确附加到各个层级的节点上，确保在各版本IE及Firefox中都能正常显示。

* 节点1
** 节点2
** 节点3
*** 节点4

如果节点关系如上。

<div id="node1">level 1</div>

<script>

function a()
{
    var node1=$("node1");// 第一层

    var node2 = createElement("div");// 第二层-父亲node1
    node2.innerHTML="<span>level 2</span>";

    var node3 = createElement("div");// 第二层-父亲node1
    node3.innerHTML="<span>level 2</span>";

    var node4 = createElement("div");// 第三层-父亲node3
    node4.innerHTML="<span>level 3</span>";

    //FF 正常
    //IE8 正常
    //IE7，IE6不正常
    var chk;
    chk = createElement("input");// 复选框
    chk.type = "checkbox";
    chk.checked = true;
    node1.appendChild(chk);

    //FF 正常
    //IE8 IE7 IE6 正常
    // 不正常
    chk = createElement("input");// 复选框
    chk.type = "checkbox";
    node1.appendChild(chk);
    chk.checked = true;

    //FF 正常
    //IE8 IE7 正常
    //IE6 不正常
    chk = createElement("input");// 复选框
    chk.type = "checkbox";
    node2.appendChild(chk);
    chk.checked = true;
    node1.appendChild(node2);

    //FF 正常
    //IE8 IE7 正常
    //IE6 不正常
    chk = createElement("input");// 复选框
    chk.type = "checkbox";
    node4.appendChild(chk);
    chk.checked = true;
    node1.appendChild(node3);
    node3.appendChild(node4);

    //总之：
    //有效范围FF IE8 IE7 IE6：所有祖辈（父亲，爷爷，太爷...）都加入DOM,chebox加入父节点，然后设置checked = true
    //有效范围FF IE8 IE7 :保证checkbox父亲加入DOM，不管爷爷或者更长辈是否加入DOM，chebox加入父节点，然后设置checked = true
    //有效范围FF IE8 ：不管父节点是否加入DOM,设置checked = true
    }
a();
</script>