Question

这让我发疯，必须简单。基本上，我有一个小jQuery函数，当它被选中/取消选中时显示/隐藏DIV。在FF和Chrome中工作正常，但在IE7中不起作用。当我在IE7中选中该框时，没有任何反应。

有什么想法吗？

jQuery函数：

$(document).ready(function(){

    //Hide div w/id extra
    $("#extra").css("display","none");
    // Add onclick handler to checkbox w/id additional_contacts
    $("#additional_contacts").click(function(){
        // If checked
        if ($("#additional_contacts").is(":checked"))
        {
            //show the hidden div
            $("#extra").css("display","block");
        }
        else
        {
            //otherwise, hide it
            $("#extra").css("display","none");
        }
    });

});

HTML：

<input id="additional_contacts" name="additional_contacts" type="checkbox" value="yes"> 

 <div id="extra">
    <table>
      <tr class="content">
       <td width="256"></td>
       <td width="196">Email Address:<br><br></td>
       <td width="340"><input type="text" name="Email5" size="40"><br><br></td>
       <td width="170"></td>
      </tr>
    </table>
</div>

Answer 1

可能是IE无法识别的伪选择器:checked

试

if ($("#additional_contacts")[0].checked) //use of [0] will return the DOM element
        {
            //show the hidden div
            $("#extra").css("display","block");
        }
        else
        {
            //otherwise, hide it
            $("#extra").css("display","none");
        }

或

  if ($("#additional_contacts").attr('checked'))
            {
                //show the hidden div
                $("#extra").css("display","block");
            }
            else
            {
                //otherwise, hide it
                $("#extra").css("display","none");
            }

OR

您可以使用change和toggle

  $("#additional_contacts").change(function(){
       $("#extra").toggle();
  });

http://jsfiddle.net/L22eF/

Answer 2

我不确定这会解决您的ie7问题，但尝试此代码也是如此@jbaby指出： $（文件）。就绪（函数（）{

    //Hide div w/id extra
   $("#extra").hide();
    // Add onclick handler to checkbox w/id additional_contacts
   $("#additional_contacts").click(function(){
        // If checked
        if ($(this).checked) //notice the use of this here - better jquery practice
        {
            //show the hidden div
            $("#extra").show();
        }
        else
        {
            //otherwise, hide it
            $("#extra").hide();
        }
  });

}）;

对于jQuery pure，你可以交换.checked for .prop（“checked”，true）

也尝试在代码中使用此元标记：

<meta http-equiv="X-UA-Compatible"  content="IT=edge,chrome=IE7">

请注意，实际上并不需要添加chrome = IE8但是如果遇到安装了chorme框架的ie7或更少的用户，它将使用chrome高级渲染引擎而不是ie7

（顺便说一句，你也可以提示他们安装谷歌框架 - 但这不属于主题）

从我的经验来看，这个黑客解决了很多神秘的IE问题。

Answer 3

检查Java脚本错误。如果您使用了console.log，则功能无法正常工作。因此删除控制台属性并试一试！

复选框上的jQuery显示/隐藏不起作用

3 个答案: