Question

在子类中“输入”复选框没有运气时，我尝试更改父类中的类名。需要用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标记中的类名更改为“checked”。然后它将更改css样式，以便用户看到图像被选中。在jsfiddle链接中尝试一下。

Css代码：

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

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

Answer 1

基于你的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

Answer 2

以下是工作演示 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)"添加到复选框

当使用javascript检查复选框时，如何更改父类的类？

2 个答案: