纯Javascript目标标签

史蒂文斯皮尔

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

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中）？

jfriend00

为了使您的jsFiddle工作，您必须更改以下内容：

修复语法错误（缺少addListener()函数调用的结束括号，您会有一个额外的结束括号。
实际调用该listener()函数以使其运行。
定位实际标签，而不是您的班级的复选框

有几种不同的方法来定位标签。最简单的方法是将输入内容括在标签内，然后仅用于.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对没问题，但是我不喜欢该事件侦听器响应整个页面中所有传播的更改事件的事实。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。