变化IMG类复选框

Question

<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 --> 

我和javascript中的问题，以改变

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

类的复选框<input type="checkbox">。 当复选框被选中时，img类将从“unmarkedImg”更改为“markedImg”，并且当您勾选复选框时，更改将反转。

<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 --> 

如果我可以打扰另一个问题。我将如何改变你给出的JavaScript，然后再做同样的事情。如果选中其中一个框，该复选框的图像将从“未标记的图像”变为“标记的图像”，然后相反。我只是给自己的“身份证”主题（因为ElementByClassName("class").onclick/onchange不起作用）还是有更简单或更动态的方式来做到这一点？

Answer 1

这里是把它写不添加JavaScript一个元素的方法： http://jsfiddle.net/Jb7yM/

document.getElementById("MyCheckbox").onclick=function() { 
    if(this.checked) { 
     document.getElementById("MyImage").className = "markedImg"; 
    } else { 
     document.getElementById("MyImage").className = "unMarkedImg"; 
    } 
} 

编辑：，如果你希望能够做多张图片，你可以做这样的事情： http://jsfiddle.net/Jb7yM/2/

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"; 
     } 
    } 
} 

和包装图像/复选框集团这样的：

<div class="imgGroup"> 
    <div class="unMarkedImg">img</div><!-- div for example, you'd have an image --> 
    <br /> 
    <input type="checkbox" class="MyCheckbox" /> 
</div> 

EDIT2：我看你添加你的HTML你的问题，这将与当前的HTML工作，而不必把onclicks在您的元素（通常做法，我总是尽量避开），所有你需要做的被加上“MyCheckbox”类的复选框（或更改类的名称的东西，更适合你）： http://jsfiddle.net/c8DPz/

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

Answer 2

jsFiddle here.

我已经提出了一个简单的方法来做到这一点（我假设你只是想在这里纯JavaScript）下面的解释：

HTML：

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

Javascript：

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 
    } 
} 

---

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

首先，check this new jsFiddle。

HTML：

<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> 

的Javascript：

function toggleImgClass() { 
    var example = document.getElementsByClassName('example'); 
    // Set a variable for all checkbox elements with the class name 'example' 
    for(i=0; i<example.length; i++) { // For each element with the class name 'example' 
     if (example[i].checked){ // If this one is checked 
     document.getElementsByName("images")[i].className = "markedImg"; 
     // Set its corresponding image to have the markedImg class. 
     }else{ 
     document.getElementsByName("images")[i].className = "unmarkedImg"; 
     // Set its corresponding image to have the unmarkedImg class. 
     } 
    } 
} 

注意，使用内嵌的JavaScript（如<input onclick="toggleImgClass()">）不最佳实践，但在这种情况下，我我只是试图向你展示一个简单的例子，说明JavaScript的基础知识如何工作，所以希望你可以开始对它进行改进。如果。