點擊標籤不檢查複選框，如果隱藏時使用IE 7或8

我想創建一個使用與複選框元素相關聯的標籤並隱藏（顯示：無）複選框的自定義設計複選框。點擊標籤不檢查複選框，如果隱藏時使用IE 7或8

在IE瀏覽器以外的所有瀏覽器上都能正常工作，這要求複選框對於可點擊的標籤可見。

這裏是我的代碼...

HTML

<input type="checkbox" id="myCheck" />

CSS

label.checkbox { 
    border:1px solid #666; 
    width:25px; 
    height:23px; 
    display:block; 
}

jQuery的

$("input[type=checkbox]").each(function() { 
    $(this).hide().before('<label for="' + $(this).attr("id") + '" class="checkbox"></label>'); 
}); 

$("input[type=checkbox]").live('change', function() { 
    if ($(this).prop('checked') == true) { 
     $('label[for=' + $(this).attr("id") + ']').html("X") 
    } else { 
     $('label[for=' + $(this).attr("id") + ']').html("") 
    } 
});

或者jsfiddle

來源

2012-07-18 Tom

我認爲這種情況在Firefox過，但我不知道。 – Inkbug 2012-07-18 14:06:11

不是在OSX的最新版本的FF上，不是在Windows上試過。 – Tom 2012-07-18 14:16:38

我不知道是否有這樣做更efective方式，但你可以通過設置複選框元素位置出來的頁面都這樣做，

.hiddenEl { 
    position:absolute; 
    top: -3000px; 
} 


$("input[type=checkbox]").each(function() { 
    $(this).addClass("hiddenEl").before('<label for="' + $(this).attr("id") + '" class="checkbox"></label>'); 
});

DEMO

UPDATE

而且你可以設置checbox不透明度爲零，這將隱藏它沒有「dispayl：none」，

$(this).css("opacity", 0)

或

$(this).fadeTo(0, 0)

來源

2012-07-18 14:06:27 ocanal

注意：通常最好使用'left：-3000px'而不是'top：-3000px'（或9999px）。當你用'top'點擊標籤時，焦點將被設置爲單選按鈕，並且IE8將嘗試將其放到視圖中 - 滾動到頁面頂部時會產生不幸的副作用。因此，如果您的內容水平放置，並且沒有水平滾動條，最好使用'left'而不是'top' – 2013-07-15 03:20:54

直到版本IE9，Internet Explorer中不支持'opacity'屬性，因此我必須使用'filter：Alpha（opacity = 0）'。 [mozilla-css-opacity]（https://developer.mozilla.org/en-US/docs/Web/CSS/opacity） – ityler22 2016-10-25 18:25:06

@ ityler22，我認爲你不必擔心它是由jquery處理的。 – ocanal 2016-10-26 06:40:45

試試這個：

#myCheck{ 
    position:absolute; 
    left:-9999px; 
    }

而離開復選框「可見」

來源

2012-07-18 14:09:22 Carsen

點擊標籤不檢查複選框，如果隱藏時使用IE 7或8

回答

相關問題