CODEWITHSUNDEEP
javascriptimagecheckbox
hama
hama

Reputation: 3

change img class with checkbox

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

I've a problem with javascript to change

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

class with the checkbox <input type="checkbox">. When the checkbox is checked the img class will change from "unmarkedImg" to "markedImg", and when you checked-off the checkbox the change will reverse.

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

If I can bother with another question. How would I change the javascript you have given so more then one do the same thing. If you check one of the boxes the image of that checkbox become change from "unmarkedImg" to "markedImg", and reverse. Do I just give theme their own "id" (because ElementByClassName("class").onclick/onchange does not work) or is there any more easier or more dynamic way to do so?

Upvotes: 0

Views: 3292

Answers (2)

dsgriffin
dsgriffin

Reputation: 68626

jsFiddle here.

I've outlined a simple way to do it (I'm assuming you're just wanting pure JavaScript here) below with explanations:

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

Edit: In reply to your updated question, an alternative to @smerny's answer for an adaptable function could look like this.

Firstly, 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.
      }
    }
}

Note that using inline JavaScript (such as <input onclick="toggleImgClass()">) isn't best practice, but in this case I'm simply trying to show you a simple example of how the basics of JavaScript work, so hopefully you can start to make improvements on it yourself.

Upvotes: 2

Smern
Smern

Reputation: 19086

Here is a way to write it without adding javascript to an element: http://jsfiddle.net/Jb7yM/

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

Edit: if you want to be able to do multiple images, you could do something like this: 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";
        }
    }
}

and wrap your image/checkbox groupings like this:

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

Edit2: i see you added your html to your question, this will work with your current html without having to put onclicks in your elements (generally a practice I always try to avoid), all you need to do is add "MyCheckbox" class to your checkboxes (or change the name of the class to something that suits you better): 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";
        }
    }
}

Upvotes: 0

Related Questions