使用javascript选中复选框时如何更改父类上的类？答案

【问题标题】：How to change class on parent class when checkbox is checked with javascript?使用javascript选中复选框时如何更改父类上的类？
【发布时间】：2013-12-30 19:49:28
【问题描述】：

我尝试在子类中“选中”输入复选框时更改父类中的类名，但没有成功。需要用 javascript 来完成，没有 Jquery。

<div class="parentBox">
<img src="pic.png" alt="Small pic" class="notChecked">
    <div class="childBox">
        <img src="pic.png"" alt="Bigger pic">
        <input type="checkbox"><span>Sample picture</span>  
    </div>
</div>

我想在输入 chechbox 被选中时将 parentBox 中的 img 标签中的类名更改为“已选中”。然后它将更改 css 样式，以便用户看到图像已被选中。在 jsfiddle 链接中尝试一下。

CSS代码：

.notChecked {border: 1px solid black;}
.checked {border: 5px solid red;}

这里是 jsfiddle 链接：http://jsfiddle.net/8LW6Q/

【问题讨论】：

如果您不使用 jQuery，则需要做很多工作。首先查看：stackoverflow.com/questions/9436123/… 和 stackoverflow.com/questions/4754699/… 您可能需要为 input 复选框分配一个类以便于导航 DOM。

标签： html css

【解决方案1】：

这是工作 Demo http://jsfiddle.net/8LW6Q/1/

你可以和一些像这样的javascript：

function funCalled(obj) {
  var el = document.getElementById("parentImg");
  if (obj.checked) {

    el.className = "checked"; 
  } else {
    el.className = "notChecked";
  }
}

您还必须将 id 添加到 img 并将 onclick="javascript:funCalled(this)" 添加到复选框

【讨论】：

感谢您的回答。帮助很大。如果我有不止一张图片怎么办？有了这个解决方案，它只改变了第一个 div 类 img。如果我有三个 div 并将鼠标悬停在第二个 div 上并更改 div 1 的类名。
您可以将例如 data-img 属性添加到输入。并将相同的 id 添加到父 img。换个js。这是工作演示jsfiddle.net/8LW6Q/4

【解决方案2】：

基于您的 html：

document.querySelector('input[type=checkbox]').addEventListener('click', function(){
    var pointer = this, className = this.checked ? 'checked' : 'notChecked';

    while(!~pointer.className.indexOf('parentBox'))
                pointer = pointer.parentNode;

    pointer.querySelector('img[src="pic.png"]').className = className;
});

参考：https://developer.mozilla.org/en-US/docs/Web/API/document.querySelector

【讨论】：