jQuery Show/Hide on Checkbox Not Working

这让我疯狂，而且一定很简单。基本上，我有一个小的jQuery函数，当它被选中/取消选中时显示/隐藏DIV。在FF和Chrome中运行良好，但在IE7中无法运行。当我在IE7中检查框时，没有任何反应。jQuery Show/Hide on Checkbox Not Working

任何想法？

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>

来源

2011-11-16 ndisdabest

你试过绑定到'change'事件吗？ –

我不知道这是否会帮助IE7的困境，但我会改变你的.css（...）调用.hide（）和.show（），我也会改变你的.is（“：checked “）.prop（'checked'） – jbabey

你使用的是什么版本的jquery？ – alonisser

可以是其未由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"); 
      }

可以使用change和toggle

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

http://jsfiddle.net/L22eF/

来源

2011-11-16 21:06:14 Rafay

我试过所有这些解决方案。无论出于何种原因，它都不起作用。当我使用jQuery来定位一个“额外”CLASS时，我至少有点操作它。我已经将这个类应用到单独的表行中，并且它有效，但搞乱了我的对齐。现在我甚至无法让它工作。不知道到底发生了什么 - 非常奇怪的行为。 – ndisdabest

我终于得到了这个工作。看起来像IE不喜欢我的一些

@ndisdabest，为了我们的读者，请具体解释一下IE不喜欢标签，你如何调试它，以及需要改变什么？ – smci

我不知道这会解决您的IE7的问题，但尝试这个代码也@ jbaby指出： $（document）.ready（function（）{

//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的纯，你可以在交易所.checked为.prop（ “选中”，真）

也尝试在代码中使用此meta标签：

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

通知，添加铬= IE8是不是真的需要，但如果你遇到用ie7或更低的用户安装chorme框架它将使用铬高级渲染引擎，而不是ie7

（顺便说一句，你也可以提示他们安装谷歌框架 - 但已脱离主题）

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

来源

2011-11-16 21:06:40 alonisser

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

来源

2014-11-04 11:10:37 user1256936

jQuery Show/Hide on Checkbox Not Working

回答

相关问题