纯Javascript目标标签

Question

我有一些复选框，并且希望在选中复选框时更改标签的文本：

的jsfiddle

var listener = function() {
    document.addEventListener('change', function(e) {
            if (e.target.checked) {
                e.target.label.className = "option-selected";
            }
        }
    }
}

HTML，如果您感兴趣：

<input id="0A" class="individual-checkbox" type="checkbox" value="A">
<label for="0A">A</label>
<br>
<input id="0B" class="individual-checkbox" type="checkbox" value="B">
<label for="0B">B</label>

显然， target.label不起作用。 如何访问目标的标签并为其提供CSS类（完全在JavaScript中）？

Answer 1

要使jsFiddle工作，必须更改以下内容：

1. 修复语法错误（缺少addListener()函数调用的封闭括号，并且您有一个额外的封闭括号。
2. 实际调用listener()函数使其运行。
3. 定位实际标签，而不是您的班级的复选框

有几种不同的方法来定位标签。 最简单的方法是将输入内容括在标签内，然后使用.parentNode从复选框中获取标签。

HTML：

<label for="0A">
    <input id="0A" class="individual-checkbox" type="checkbox" value="A">
A</label>
<br>
<label for="0B">
    <input id="0B" class="individual-checkbox" type="checkbox" value="B">
B</label>

码：

var listener = function() {
    document.addEventListener('change', function(e) {
        if (e.target.checked) {
            e.target.parentNode.className = "option-selected";
        }
    });
}
listener();

运作中的jsFiddle： http : //jsfiddle.net/jfriend00/s2A7W/

---

如果您不想更改HTML，则只需在输入元素之后找到label元素。

您可以这样做：

var listener = function() {
    document.addEventListener('change', function(e) {
        var label;
        if (e.target.checked) {
            label = next(e.target, "label");
            if (label) {
                label.className = "option-selected";
            }
        }
    });
}
listener();

function next(src, tag) {
    tag = tag.toUpperCase();
    while (src && src.tagName !== tag) {
        src = src.nextSibling;
    }
    return src;    
}

工作的jsFiddle： http : //jsfiddle.net/jfriend00/3wQKa/

---

仅供参考，您可能还应该将侦听器的操作限制为仅当复选框实际上是目标或具有特定类名的元素或某些其他区别功能（确保它是您希望将此代码作为目标的复选框）时。 使用e.target.checked可能是安全的，但是我不喜欢该事件侦听器响应整个页面中所有传播的更改事件的事实。

Answer 2

假设只有一个label元素与该元素相关联：

e.target.labels[0].className = "option-selected";

不过，这是一个HTML5属性，我不知道它在旧版浏览器中的支持程度如何。 资料来源： MDN 。

另外，如果IE8支持足以满足您的需求，则可以使用document.querySelector显式搜索它：

var label = document.querySelector('[for=' + e.target.name + ']');

仅当您为input元素提供name属性（您确实要这样做，否则标签未正确连接到输入元素）时，此方法才有效。

最后，如果标签始终位于输入之后，则可以遍历DOM：

var label = e.target.nextSibling;
while (label.nodeName !== 'LABEL') {
    label = label.nextSibling;
}

---

如果要重组HTML，使input元素是label元素的子元素：

<label for="0A">
    <input id="0A" class="individual-checkbox" type="checkbox" value="A">
    A
</label>

那么您可以简单地使用e.target.parentNode来获取标签。 将输入元素放置在标签内还会将标签连接到输入。

Answer 3

这将达到目的：

function addListener(elem) {
    // remember: checkboxes never change trair value 
    elem.addEventListener('click', function () {
        var ls = document.getElementsByTagName('label');
        for (var l = 0, ll = ls.length, lbl; l < ll; ++l) {
            lbl = ls[l];
            if ( this.id == lbl.getAttribute("for") )
            {
                lbl.className = ( this.checked ? "option-selected" : "" );
            }
        }
    });
}

见http://jsfiddle.net/fGSCH/10/

_{请注意， addListener()可能无法在所有浏览器中都起作用。 但是由于您在示例中使用了它，因此我也将使用它。}