Javascript 使用复选框更改img类 形象

我有一个javascript问题需要更改

<div class="outerBox">
    <img src="pics/folder1/img1.jpg" alt="small image" class="unmarkedImg">
    <div class="innerBox">
        <img src="pics/folder1/img1.jpg" alt="big image">
        <input type="checkbox"><span>Image</span>
    </div> <!-- innerBox -->
</div> <!-- outerBox -->

使用复选框

初始化。 选中该复选框时，img类将从“unmarkedImg”更改为“markedImg”，选中该复选框时，更改将反转

<img src="pics/folder1/img1.jpg" alt="small image" class="unmarkedImg">

形象
形象
形象
形象

如果我能再问一个问题。我将如何更改您提供的javascript，让更多的人做同样的事情。如果选中其中一个复选框，则该复选框的图像将从“unmarkedImg”更改为“markedImg”，反之亦然。我只是给主题自己的“id”（因为

ElementByClassName（“class”）.onclick/onchange

不起作用）还是有更简单或更动态的方法来实现这一点？

我在下面概述了一种简单的方法（我假设您只需要纯JavaScript），并给出了解释：

HTML:

    <div class="outerBox">
    <img src="pics/folder1/img1.jpg" alt="small image" class="unmarkedImg">
    <div class="innerBox">
        <img src="pics/folder1/img1.jpg" alt="big image">
        <input type="checkbox"><span>Image</span>
    </div> <!-- innerBox -->
</div> <!-- outerBox -->

    <div class="outerBox">
    <img src="pics/folder1/img2.jpg" alt="small image" class="unmarkedImg">
    <div class="innerBox">
        <img src="pics/folder1/img2.jpg" alt="big image">
        <input type="checkbox"><span>Image</span>
    </div> <!-- innerBox -->
</div> <!-- outerBox -->

    <div class="outerBox">
    <img src="pics/folder1/img3.jpg" alt="small image" class="unmarkedImg">
    <div class="innerBox">
        <img src="pics/folder1/img3.jpg" alt="big image">
        <input type="checkbox"><span>Image</span>
    </div> <!-- innerBox -->
</div> <!-- outerBox -->

    <div class="outerBox">
    <img src="pics/folder1/img4.jpg" alt="small image" class="unmarkedImg">
    <div class="innerBox">
        <img src="pics/folder1/img4.jpg" alt="big image">
        <input type="checkbox"><span>Image</span>
    </div> <!-- innerBox -->
</div> <!-- outerBox -->

<img id="theImage" src="pics/flowers/f0.jpg" alt="Liten bild" class="unmarkedImg">
<input onclick="toggleImgClass()" id="example" type="checkbox">

function toggleImgClass(){
  var example = document.getElementById('example');
  // Set a variable for the checkbox element with the ID 'example' 
  if (example.checked){ // If the checkbox is checked
    document.getElementById("theImage").className = "markedImg"; 
    // Other classes are removed from the image and replaced with markedImg
  }else{ // Else if the checkbox isn't checked
    document.getElementById("theImage").className = "unmarkedImg";
    // Other classes are removed from the image and replaced with unmarkedImg
  }
}

<div class="outerBox">
  <img src="http://www.microugly.com/images/tutorials/inkscape-small-icon/icon-zoom-pixelated.png" alt="Liten bild" name="images" class="unmarkedImg"/>
  <div class="innerBox">
    <input type="checkbox" onclick="toggleImgClass()" class="example"/>     
    <span>Prästkrage</span>
  </div> 
</div> 

---

编辑：在回答您更新的问题时，可替代@smerny答案的适应性函数如下所示

首先

HTML:

    <div class="outerBox">
    <img src="pics/folder1/img1.jpg" alt="small image" class="unmarkedImg">
    <div class="innerBox">
        <img src="pics/folder1/img1.jpg" alt="big image">
        <input type="checkbox"><span>Image</span>
    </div> <!-- innerBox -->
</div> <!-- outerBox -->

    <div class="outerBox">
    <img src="pics/folder1/img2.jpg" alt="small image" class="unmarkedImg">
    <div class="innerBox">
        <img src="pics/folder1/img2.jpg" alt="big image">
        <input type="checkbox"><span>Image</span>
    </div> <!-- innerBox -->
</div> <!-- outerBox -->

    <div class="outerBox">
    <img src="pics/folder1/img3.jpg" alt="small image" class="unmarkedImg">
    <div class="innerBox">
        <img src="pics/folder1/img3.jpg" alt="big image">
        <input type="checkbox"><span>Image</span>
    </div> <!-- innerBox -->
</div> <!-- outerBox -->

    <div class="outerBox">
    <img src="pics/folder1/img4.jpg" alt="small image" class="unmarkedImg">
    <div class="innerBox">
        <img src="pics/folder1/img4.jpg" alt="big image">
        <input type="checkbox"><span>Image</span>
    </div> <!-- innerBox -->
</div> <!-- outerBox -->

<img id="theImage" src="pics/flowers/f0.jpg" alt="Liten bild" class="unmarkedImg">
<input onclick="toggleImgClass()" id="example" type="checkbox">

function toggleImgClass(){
  var example = document.getElementById('example');
  // Set a variable for the checkbox element with the ID 'example' 
  if (example.checked){ // If the checkbox is checked
    document.getElementById("theImage").className = "markedImg"; 
    // Other classes are removed from the image and replaced with markedImg
  }else{ // Else if the checkbox isn't checked
    document.getElementById("theImage").className = "unmarkedImg";
    // Other classes are removed from the image and replaced with unmarkedImg
  }
}

<div class="outerBox">
  <img src="http://www.microugly.com/images/tutorials/inkscape-small-icon/icon-zoom-pixelated.png" alt="Liten bild" name="images" class="unmarkedImg"/>
  <div class="innerBox">
    <input type="checkbox" onclick="toggleImgClass()" class="example"/>     
    <span>Prästkrage</span>
  </div> 
</div> 

Prästkrage

Javascript:

    <div class="outerBox">
    <img src="pics/folder1/img1.jpg" alt="small image" class="unmarkedImg">
    <div class="innerBox">
        <img src="pics/folder1/img1.jpg" alt="big image">
        <input type="checkbox"><span>Image</span>
    </div> <!-- innerBox -->
</div> <!-- outerBox -->

    <div class="outerBox">
    <img src="pics/folder1/img2.jpg" alt="small image" class="unmarkedImg">
    <div class="innerBox">
        <img src="pics/folder1/img2.jpg" alt="big image">
        <input type="checkbox"><span>Image</span>
    </div> <!-- innerBox -->
</div> <!-- outerBox -->

    <div class="outerBox">
    <img src="pics/folder1/img3.jpg" alt="small image" class="unmarkedImg">
    <div class="innerBox">
        <img src="pics/folder1/img3.jpg" alt="big image">
        <input type="checkbox"><span>Image</span>
    </div> <!-- innerBox -->
</div> <!-- outerBox -->

    <div class="outerBox">
    <img src="pics/folder1/img4.jpg" alt="small image" class="unmarkedImg">
    <div class="innerBox">
        <img src="pics/folder1/img4.jpg" alt="big image">
        <input type="checkbox"><span>Image</span>
    </div> <!-- innerBox -->
</div> <!-- outerBox -->

<img id="theImage" src="pics/flowers/f0.jpg" alt="Liten bild" class="unmarkedImg">
<input onclick="toggleImgClass()" id="example" type="checkbox">

function toggleImgClass(){
  var example = document.getElementById('example');
  // Set a variable for the checkbox element with the ID 'example' 
  if (example.checked){ // If the checkbox is checked
    document.getElementById("theImage").className = "markedImg"; 
    // Other classes are removed from the image and replaced with markedImg
  }else{ // Else if the checkbox isn't checked
    document.getElementById("theImage").className = "unmarkedImg";
    // Other classes are removed from the image and replaced with unmarkedImg
  }
}

<div class="outerBox">
  <img src="http://www.microugly.com/images/tutorials/inkscape-small-icon/icon-zoom-pixelated.png" alt="Liten bild" name="images" class="unmarkedImg"/>
  <div class="innerBox">
    <input type="checkbox" onclick="toggleImgClass()" class="example"/>     
    <span>Prästkrage</span>
  </div> 
</div> 

函数toggleImgClass（）{
var example=document.getElementsByClassName（'example'）；
//为类名为“example”的所有复选框元素设置一个变量
对于（i=0；i，这里有一种在不向元素添加javascript的情况下编写它的方法：

编辑：如果您希望能够处理多个图像，可以执行以下操作：

var checkbox=document.getElementsByClassName（“MyCheckbox”）；
对于（变量i=0；i

并按如下方式包装图像/复选框分组：

var checkboxes = document.getElementsByClassName("MyCheckbox");
for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].onclick = function () {
        var imgNode = this.parentNode.firstChild;
        while (imgNode.tagName != "DIV") { //change to IMG in your case
            imgNode = imgNode.nextSibling
        }
        if (this.checked) {
            imgNode.className = "markedImg";
        } else {
            imgNode.className = "unMarkedImg";
        }
    }
}


img



Edit2:我看到您在问题中添加了html，这将适用于您当前的html，而无需在元素中添加鼠标点击（通常这是我一直试图避免的做法），您只需将“MyCheckbox”类添加到复选框中（或将类的名称更改为更适合您的名称）：

var checkbox=document.getElementsByClassName（“MyCheckbox”）；
对于（变量i=0；i
查看我的“edit2”，它是为处理您在上面添加的html而构建的。请不要删除您问题的内容。应该保留这些内容，以便人们在搜索时可以找到类似的问题。