Javascript 在不使用jquery的情况下选中时，在多组单选按钮的父元素上添加样式

我在将jquery代码转换为javascript时遇到问题。 有一组单选按钮，我需要在其父元素上添加一个样式，如下所示

每组单选按钮的每一个选择都将添加到其父项中。我只需要使用Javascript就可以了

以下是：效果应该类似于第一个链接

i、 e

1

2



1

2



1

2

此代码在不使用jQuery的情况下提供了预期的功能：

function changeEvent(event) {
    //add highlight class
    this.parentNode.classList.add("highlight");
    try {
        //remove highlight class from previously selected radio in group
        //if already existing
        this.parentNode.parentNode.highlightDIV.classList.remove("highlight");
    } catch (ignore) {}
    //keep the highlighted div as a property of the parent div
    this.parentNode.parentNode.highlightDIV = this.parentNode;
}

//select all radio buttons
var radioList = document.querySelectorAll('input[type="radio"]');
//loop through list and add event listener
for (var i = 0; i < radioList.length; i++) {
    radioList[i].addEventListener("change", changeEvent, false);
}

函数更改事件（事件）{
//添加突出显示类
this.parentNode.classList.add（“突出显示”）；
试一试{
//从组中以前选择的收音机中删除突出显示类
//如果已经存在
this.parentNode.parentNode.highlightDIV.classList.remove（“highlight”）；
}捕获（忽略）{}
//将高亮显示的div保留为父div的属性
this.parentNode.parentNode.highlightDIV=this.parentNode；
}
//选择所有单选按钮
var radioList=document.querySelectorAll（'input[type=“radio”]”）；
//循环浏览列表并添加事件侦听器
对于（变量i=0；i

它使用对

parentNode

的引用，但它们可以被算法所取代，以便在更动态的结构中动态查找所需的节点。

---

我希望您能得到指导，您可以改进和修改代码，以适应您的应用程序需要。

谢谢您的回复。.我测试了您的代码，它确实突出显示了父元素，但每次单击其他单选按钮时，它也会突出显示。.这是小提琴。您能将其与此类似吗。请但是在您的第二个版本中，

输入

字段是

标签

元素的子元素。当您在第一个版本中使用我的建议时，它就起作用了——只需将jQuery代码替换为我的代码即可。您的第二个示例包含另一个大问题：您使用多个标签引用同一ID，并且您的ID不是唯一的！为什么代码在IE8中不起作用？它表示parentNode为null或不是对象。

function changeEvent(event) {
    //add highlight class
    this.parentNode.classList.add("highlight");
    try {
        //remove highlight class from previously selected radio in group
        //if already existing
        this.parentNode.parentNode.highlightDIV.classList.remove("highlight");
    } catch (ignore) {}
    //keep the highlighted div as a property of the parent div
    this.parentNode.parentNode.highlightDIV = this.parentNode;
}

//select all radio buttons
var radioList = document.querySelectorAll('input[type="radio"]');
//loop through list and add event listener
for (var i = 0; i < radioList.length; i++) {
    radioList[i].addEventListener("change", changeEvent, false);
}