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

回答

相關問題