Javascript: Mostrar imágenes con casillas de valores

Question

Actualmente estoy trabajando con botones de opción y casillas de verificación para mostrar imágenes con la ayuda de javascript. Para ser específico: me encuentro con un problema al trabajar con casillas de verificación y mostrar las imágenes. Con los botones de radio solo se mostrará una imagen para esa categoría. Pero con casillas de verificación, se necesita mostrar más de una imagen. Por ejemplo, un usuario puede verificar el campo de chaqueta y guante y se mostrarán ambas imágenes.

¿Cómo puedo formatear la función para mostrar varias imágenes cuando se hace clic en las casillas de verificación? EXAMPLE

JS

<script language="JavaScript" type="text/javascript"> 

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" value="1" onclick='check_value(1, 1, "bike")'/> KAWASAKI KX 450F<br /> 
    <input type="radio" name="field" value="2" onclick='check_value(2, 1, "bike")'/> 2010 Yamaha Road Star S<br /> 
    <input type="radio" name="field" value="3" 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, 3, "accesories")'/> Chrome Front Plate<br /> 
    <input type="checkbox" name="field" value="2" onclick='check_value(2, 3, "accesories")'/> Jacket<br /> 
    <input type="checkbox" name="field" value="3" onclick='check_value(3, 3, "accesories")'/> Gloves    
</form> 

<img id="imgBox3" src="#" style="display:none"> 

Answer 1

Añadir otros dos rectángulos:

<img id="imgBox3a" src="#" style="display:none"> 
<img id="imgBox3b" src="#" style="display:none"> 
<img id="imgBox3c" src="#" style="display:none"> 

Entonces onclick llamar:

check_value(1, "3a", "accessories"); 
check_value(2, "3b", "accessories"); 
check_value(3, "3c", "accessories"); 

Answer 2

Creo anexando dos imágenes en una etiqueta de la imagen no es posible probar esto

Crear un DIV como esto

 <div id="image"> 
    <img id="imgBox3" src="#" style="display:none"/> 
     </div> 

de guión:

Crear un elemento de imagen y añadirlo a la DIV

 var imag=document.createElement("img"); 
    imag.src="image"; 
    document.getElementById("image").appendChild(imag); 

Answer 3

<form name="tire"> 
    <input type="checkbox" name="field" value="1" onclick='check_value(1, 3, "accesories")'/> Chrome Front Plate<br /> 
    <input type="checkbox" name="field" value="2" onclick='check_value(2, 3, "accesories")'/> Jacket<br /> 
    <input type="checkbox" name="field" value="3" onclick='check_value(3, 3, "accesories")'/> Gloves    
</form> 
<div id='access'></div>  

function check_value(val, id, type) {  
     var img = document.createElement("img"); 
    img.src = "http://webprolearner2346.zxq.net/bike_calculator/images/"+type+val+".jpg"; 
    alert(img.src) 
    var src = document.getElementById("access"); 
    src.appendChild(img); 
     } 

cheque esta demo fiddle

Answer 4

En primer lugar, si realmente desea que las casillas de verificación para actuar como ... bueno ... casillas de verificación, se debe conectar el controlador al evento onchange:

<h2>Choose Accesories</h2> 
<form name="tire"> 
    <input type="checkbox" name="field" value="1" onchange='check_value(1, 3, "accesories",this)'/> Chrome Front Plate<br /> 
    <input type="checkbox" name="field" value="2" onchange='check_value(2, 3, "accesories",this)'/> Jacket<br /> 
    <input type="checkbox" name="field" value="3" onchange='check_value(3, 3, "accesories",this)'/> Gloves    
</form> 

Notarás que agregué otro parámetro: "this" apuntará al elemento cambiado. Luego, en su función usted puede hacer esto:

function check_value(val, id, type,mycheckbox) { 
    if (mycheckbox.checked){ 
     //do something when it's checked 
    }else{ 
     //do something when it's not checked. 
    } 
} 

Así cómo mostrar varias imágenes?

Una forma es crear dinámicamente imágenes y anexarlas como sugirió @Sibu (no olvides eliminarlas cuando no estén marcadas).

Otra es haber creado previamente los elementos de la imagen con "display: none" (con su atributo src ya configurado) por lo que lo único que tiene que hacer es jugar con el atributo de visualización.

Personalmente, diría que la opción 2 es mejor, porque los cambios en css son más rápidos que las manipulaciones dom.