IE onClick不會檢查複選框，除非您單擊標籤中的圖像？

好吧，我有一個標籤，在這個標籤裏面是一個div，它包含一個圖片和一些文字。該div有一個javascript函數的onClick調用，它改變了標籤內div的顏色，並且還檢查複選框（出於某種原因，IE和firefox不想正確檢查它，chrome工作正常）。的Javascript：IE onClick不會檢查複選框，除非您單擊標籤中的圖像？

<script language="javascript" type="text/javascript"> 
    function changecolor(id, chck1, firstcolor, secondcolor) 
       { 

        divid = document.getElementById(id); 
    chkboxid = document.getElementById(chck1); 
    if(chkboxid.checked){ 
        divid.style.background= firstcolor; 
    var ua = navigator.userAgent.toLowerCase(); 
    if (ua.indexOf('safari/') == -1){ 
    chkboxid.checked = false ; 
    } 
    } 
    else{ 
    divid.style.background= secondcolor; 
    var ua = navigator.userAgent.toLowerCase(); 
    if (ua.indexOf('safari/') == -1){ 
    chkboxid.checked = true ; 
    } 
    } 
       }

HTML：

<input type="checkbox" id="idbox" name="cboxwithlabel" value="Another check box"><label for="idbox"><div class="listing" onClick="changecolor('Test33', 'idbox', '#09C', '#0F0');" id="Test33">Another checkbox<img src="images/checkmark.png" height="80" width="80" /></div></label>

好了，用這個在Firefox正常工作，而Chrome，但IE 7（沒有測試其它版本還），它只會點擊div內的圖片纔會勾選複選框。點擊div本身只會改變背景顏色。那麼有什麼修復IE的工作，所以當你點擊div它也檢查複選框？

來源

2009-08-27 John

擺脫瀏覽器檢測代碼，並再次在所有瀏覽器中嘗試。 – 2009-08-27 17:57:48

如果我擺脫了檢測代碼，它在Chrome/Safari中不起作用。 – John 2009-08-27 17:59:01

瀏覽器所做的一件好事是觸發來自<label>元素for us的點擊事件。

所以我的建議是將點擊處理程序附加到複選框本身。這樣你的功能變得更加簡單。

此外，將塊級元素放入行級元素內是非法的，因此我已將<div>更改爲<span>，並使用CSS將其渲染爲塊級元素。

<html> 
<head> 

<script language="javascript" type="text/javascript"> 
    function changecolor(cbox, divId, firstcolor, secondcolor) 
    { 
    document.getElementById(divId).style.background = cbox.checked ? firstcolor : secondcolor; 
    } 
</script> 

<style type="text/css"> 
    span.listing { 
    display: block; 
    } 
</style> 

</head> 
<body> 

<input type="checkbox" id="idbox" name="cboxwithlabel" value="Another check box" onClick="changecolor(this, 'Test33', '#09C', '#0F0');"> 
<label for="idbox"> 
    <span class="listing" id="Test33"> 
    Another checkbox<img src="images/checkmark.png" height="80" width="80" onclick="this.parentNode.click()" /> 
    </span> 
</label> 

</body> 
</html>

來源

2009-08-27 18:06:26

這是有效的，除了現在當你點擊IE中的圖像時，它不會執行onClick函數，它必須是你點擊的跨度......所以最終會出現完全相反的問題。 Firefox和Chrome都可以使用這個解決方案。 – John 2009-08-27 18:28:47

好吧，在這種情況下的圖像問題只是一個IE問題。我將能夠解決這個問題。謝謝。 – John 2009-08-27 18:34:22

我不小心留下了一些調試代碼。我更新了它，現在單擊IE中的圖像。 – 2009-08-27 18:46:51

有些意見已經提出了它，但作爲疑難解答的一部分，我會在設置複選框之前發出警報。

alert('test'); 
chkboxid.checked = true;

我想你會看到警報從未執行，檢查瀏覽器的代碼在IE和FF中的行爲有所不同。

如果不是的話，您至少可以通過移動警報來找出爲什麼這不起作用。

來源

2009-08-27 18:10:01 Mayo

IE onClick不會檢查複選框，除非您單擊標籤中的圖像？

回答

相關問題