IE瀏覽器 - 隱藏的單選按鈕沒有被點擊時點擊相應的標籤

我只注意到在IE7中的一個奇怪的行爲。IE瀏覽器 - 隱藏的單選按鈕沒有被點擊時點擊相應的標籤

我有相關的標籤單選按鈕，如下所示：

<input type="radio" name="filter" id="filter_1" value="Activities" checked="checked" /> 
<label for="filter_1">Activities</label> 

<input type="radio" name="filter" id="filter_2" value="Services" /> 
<label for="filter_2">Services</label>

單選按鈕通過使用CSS顯示隱藏：none或visibility：hidden的（不要問）

的問題是 - 當我點擊IE7中的標籤（尚未查看其他IE版本）時，實際上未檢查相關的單選按鈕。我用jquery證實了這一點 - 標籤點擊事件被觸發，但單選按鈕點擊事件不是。表單帖子也確認選中的單選按鈕不會改變。

這可以在Firefox中正常工作，並且如果我刪除隱藏單選按鈕的CSS，也可以正常工作。

這是一個IE錯誤還是我錯過了什麼？

來源

2009-08-10 ScottE

它可能與display: none有關 - 您也可能發現隱藏的元素未將其值與表單的其餘部分一起提交。如果你有控制權，你可以嘗試positioning the elements off screen rather then hiding them。

來源

2009-08-10 01:24:04 robertc

+1是的，這將起作用。如果這是IE中已知的錯誤，我更好奇。 – ScottE 2009-08-10 11:43:45

我不認爲這是一個已知的bug，而是規範中未明確定義的行爲。看看我鏈接到上面的帖子鏈接到的MSDN文章，似乎這種行爲是完全故意的IE部分。如果有東西顯示：沒有，那麼它實際上不是文檔的一部分。 MS選擇忽略這些因素，Mozilla選擇不這樣做，這並不是說有一個明確的對或錯的方法來做到這一點。 – robertc 2009-08-10 15:23:54

當設計人員的CSS無法傳遞數據時，可能會破壞數據進入開發人員的表單處理程序，這並不是很酷。這種行爲聞起來錯了。感謝您的解決方法！ – Koobz 2010-07-05 20:08:57

此問題存在於IE6,7,8甚至目前的9測試版中。作爲一個解決方案，將屏幕上的單選按鈕定位是一個好主意。

下面是一個替代方案，不需要涉及設計者或css：正常隱藏按鈕，並使任何函數處理按鈕的click事件也處理標籤的click事件。

來源

2010-12-27 19:08:30 thismax

$（「label」）。click（function（e）{e.preventDefault（）; $（「＃」+ $（this）.attr（「for」））。click（）。change（）;} ）; – Lane 2011-05-23 20:42:12

Lane，這是一個非常酷的解決方案。我將它添加爲答案，以便讓人們不會像我幾乎那樣忽略它:) – bestattendance 2011-09-26 14:36:59

更換

style="display:none;"

與

style="-moz-opacity:0;filter:alpha(opacity:0);opacity:0;"

來源

2011-07-11 19:21:35 Uncle

$("label").click(function(e){ 
    e.preventDefault(); 
    $("#"+$(this).attr("for")).click().change(); 
});

感謝巷這一點。我在此添加它作爲答案，以便人們不會忽略您的評論。

來源

2011-09-26 14:37:50 bestattendance

+1非常感謝@Lane – brenjt 2011-10-18 16:19:39

你可以嘗試一下本作IE7,8：中

input{ 
    position: absolute; 
    z-index: -1; 
}

代替

input{ 
    display: none; 
}

來源

2011-12-08 08:32:52 scoutm

這對我的作品

width: 0px;

在IE7和IE8測試。純CSS沒有javascript。

來源

2012-03-30 00:59:32 tinny

還有就是你的主張的一些不錯的編譯：

input { 
-moz-opacity:0; 
filter:alpha(opacity:0); 
opacity:0; 
position: absolute; 
}

代替：

display: none;

來源

2012-06-01 13:20:07 Kasyx

這是一個維基的答案，把所有不同的答案和選項。

選項1：移動離屏元件相對於完全隱藏它

position: absolute; 
top: -50px; 
left: -50px;

選項2：使用JavaScript代碼的單選按鈕設置爲選中被點擊該標籤時

$("label").click(function(e){ 
    e.preventDefault(); 
    $("#"+$(this).attr("for")).click().change(); 
});

選項3：設置元素的寬度和/或不透明性爲零

width: 0; 
/* and/or */ 
-moz-opacity:0; 
filter:alpha(opacity:0); 
opacity:0; 
outline:none; /* this prevents IE8 from having the line around it even though it's invisible */

方案4：使用其他瀏覽器:)

基本上，這些東西的規範沒有具體說明用什麼樣的行爲，但IE普遍採取的是態度，如果它不能看，那麼它不起作用。「看到」和「工作」可能意味着不同的事情，但在這種情況下，這意味着當display:none被設置時，標籤不會激活單選按鈕，這導致了IE中許多事情所需的常規解決方法。

來源

2012-06-09 04:15:08

真棒！謝謝！ – 2012-12-03 20:41:03

如果你做的選擇1點擊標籤將導致在FF，IE和Opera不需要的頁面滾動，因爲瀏覽器將嘗試專注於輸入 – Dan 2013-08-10 19:17:16

@丹不知道，但一個'返回false' onclick可能會解決該行爲。 – 2014-01-26 19:26:36

我使用的是jQuery hide()函數，因此在不編寫更復雜的代碼的情況下更改元素隱藏的方式並不容易。我發現這個想法：我使用類來存儲checked屬性，並在提交之前再次設置此屬性。

if ($.browser.msie && $.browser.version == 7.0) { 
$('input[type=radio]').click(function() { 
    $('input[name="'+$(this).attr("name")+'"]').each(function(){ 
     if ($(this).attr("checked")){ 
      $(this).addClass("checked"); 
     }else{ 
      $(this).removeClass("checked"); 
     } 
    }); 
}); 
$('form').submit(function(){ 
    $('input.checked').each(function(){ 
     $(this).attr("checked","true"); 
    }); 
}); 
}

它在我的情況下就像一個魅力。

來源

2012-06-22 19:14:40

IE瀏覽器 - 隱藏的單選按鈕沒有被點擊時點擊相應的標籤

回答

相關問題