html - 围绕单选/复选框兼容性的标签？

Question

我注意到，如果您将单选按钮或复选框包裹在标签中，即使没有 for/id 对，整个内容也会变得可点击(事实上，它似乎忽略了这一点，因为我搞砸了!)

例子:

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

然后“一些文本”变为可点击以选中该框。我在 FF、Chrome 和 Opera 以及 IE8 中对其进行了测试，有谁知道它是否适用于旧版浏览器，例如 IE6？

Answer 1

是的，这是预期的行为。

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

To associate a label with another control implicitly, the control element must be within the contents of the LABEL element. In this case, the LABEL may only contain one control element. The label itself may be positioned before or after the associated control.

看起来这在 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'));
    });
}