Question

I am currently working with checkboxes and radio buttons displaying a picture based on the value selected. I have been able to get for the most part everything working. Problem: The checkboxes selected value displays an image but when unchecked it doesn’t remove the picture. Is there away to remove the picture when the checkbox is unchecked? EXAMPLE

JS

<script>
function check_value(val, id, type) {     
    var el = document.getElementById("imgBox" + id);
    if (val>0 && val<4) { //will trigger when [1,2,3]
         el.src = "images/"+ type + val + ".jpg";    
         el.style.display = "";

  }    
  }      
</script>

HTML

  <h2>Choose a bike</h2>
    <form name="builder">
        <input type="radio" name="field" onclick='check_value(1, 1, "bike")' />KAWASAKI KX 450F
        <br />
        <input type="radio" name="field" onclick='check_value(2, 1, "bike")' />2010 Yamaha Road Star S
        <br />
        <input type="radio" name="field" onclick='check_value(3, 1, "bike")' />Aprilia RSV4
        <br />
    </form>
    <img id="imgBox1" src="#" style="display:none">

  <h2>Choose a tire</h2> 
    <form name="tire">
        <input type="radio" name="field" value="1" onclick='check_value(1, 2, "tire")'
        />Michelin Pilot Road 3 Tires
        <br />
        <input type="radio" name="field" value="2" onclick='check_value(2, 2, "tire")'
        />Dunlop Roadsmart Sport-Touring Tires
        <br />
        <input type="radio" name="field" value="3" onclick='check_value(3, 2, "tire")'
        />Pirelli Scorpion Trail Tires
        <br />
    </form>
    <img id="imgBox2" src="#" style="display:none">

  <h2>Choose Accesories</h2>   
    <form name="tire">
        <input type="checkbox" name="field" value="1" onclick='check_value(1, "3a", "accessories")'
        />Chrome Front Plate
        <br />
        <input type="checkbox" name="field" value="2" onclick='check_value(2, "3b", "accessories")'
        />Jacket
        <br />
        <input type="checkbox" name="field" value="3" onclick='check_value(3, "3c", "accessories")'
        />Gloves</form>
    <div id="accessories">
        <img id="imgBox3a" src="#" style="display:none">
        <img id="imgBox3b" src="#" style="display:none">
        <img id="imgBox3c" src="#" style="display:none">
    </div>

Answer 1

You have to check whether the checkbox is selected or not.

To add a condition to see whether the checkbox is checked, you need to have a reference to the checkbox in the check_value function.

So add an additional argument to the check_value function: sourceElement

function check_value(sourceElement, val, id, type)

Call this function with this:

onclick='check_value(this, 1, "3a", "accessories")'

And use sourceElement to see whether the checkbox is checked or not:

var el = document.getElementById("imgBox" + id);
if(sourceElement.checked)
{
    //What you are already doing.
}
else
{
    el.src = "";
    el.style.display = "none";
}

Example: http://jsfiddle.net/nivas/9cKEz/