標籤環繞收音機/複選框兼容性？

Question

我注意到，如果你包裹在標籤的單選按鈕或複選框，整個事情就變得可以點擊，即使沒有對/ ID對（事實上，它似乎忽略了這一點，因爲我搞砸了！）

例如：

<label><input type="checkbox"> some text</label> 

然後，「某些文字」變得可點擊以勾選框。我在FF，Chrome和Opera以及IE8中測試過它，有誰知道它是否適用於IE6等舊版瀏覽器？

Answer 1

結束語label元素在Internet Explorer中被分解，直到第7版Link（谷歌緩存旁路註冊煩惱）。

Answer 2

是的，這就是預期的行爲。

http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.9

要將標籤與其他控制隱含相關聯，所述控制元件必須是LABEL元素的內容內。在這種情況下，LABEL可能只包含一個控制元素。標籤本身可以位於關聯控件之前或之後。

它看起來像這實際上並沒有在IE6中工作（還沒有嘗試過其他版本）。如果你已經有一些你的頁面上的jQuery加載，那麼你就可以拿出一個可行的方案很容易：

if ($.browser.msie) { 
    $('label:has(:input):not([for])').each(function() { 
     var $t = $(this) 
      , $in = $t.find(':input') 
     ; 
     if (!$in.attr('id')) { 
      // use this, or make a proper GUID... 
      $in.attr('id', 'input_' + (Math.random() * 1000000)); 
     } 
     $t.attr('for', $in.attr('id')); 
    }); 
}