Question

以下html代码适用于Firefox，但由于某种原因在IE中失败（Label2未显示）。这是一个错误还是我错过了什么？

任何帮助都将不胜感激。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript">
        </script>
        <script>
            jQuery(document).ready(function(){
                function setVis(){
                    var val = $("#check").is(":checked");
                    if (val) 
                        $("#g_1").show();
                    else 
                        $("#g_1").hide();
                }

                setVis();
                $("#check").change(setVis);
            });
        </script>
    </head>
    <body>
        <span>
            <input type="checkbox" id="check" />
            <label>Label1</label>
        </span>
        <span id="g_1">
            <label>Label2</label>
        </span>
    </body>
</html>

Answer 1

原因：

根据MSDN，change event是

...在提交内容时触发而不是价值在变化。例如，在文本框中，此事件用户输入时不会触发，而是当用户提交时通过离开文本框来改变有重点。

复选框的行为类似：在IE中，事件不会触发，直到焦点从元素中移除（尝试它：单击然后选中复选框，行为与预期一致）。 Firefox显然不尊重这种区别。

解决方案：

使用click事件处理程序代替change：

            $("#check").click(setVis);

......并且各行各业的行为应该保持一致。

Answer 2

请记住，在选中复选框后，启动onchange事件，然后保留复选框。您是否尝试过检查，然后单击文档上的其他位置？

您可能希望在jQuery中使用单击和按键事件（通过点击和空格键检查框）。

<sidequestion>您是否有任何理由在文档就绪段落中声明/定义函数，而不是在其之外？</sidequestion>

再一次编辑;我可以推荐这个更时尚的代码：

jQuery(document).ready(function(){
    $("#g_1").hide();
    $("#check").change(function() { $("#g_1").toggle(); });
});

Answer 3

将.change事件更改为.click事件。两个浏览器的结果是一样的。在IE中单击复选框时，没有出现模糊。

Internet Explorer中的jquery show（）/ hide（）问题？

3 个答案:

原因：

解决方案：