Javascript: Hiển thị hình ảnh có các hộp kiểm giá trị

Question

Tôi hiện đang làm việc với các nút radio và hộp kiểm để hiển thị hình ảnh với sự trợ giúp của javascript. Cụ thể: Tôi đang gặp sự cố khi làm việc với các hộp kiểm và hiển thị hình ảnh. Với các nút radio chỉ một hình ảnh sẽ được hiển thị cho danh mục đó. Nhưng với hộp kiểm nhiều hơn một hình ảnh cần phải được hiển thị. Ví dụ: người dùng có thể kiểm tra trường cho áo khoác và găng tay và cả hai hình ảnh sẽ được hiển thị.

Làm cách nào để định dạng chức năng hiển thị nhiều ảnh khi hộp kiểm được nhấp? 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

Thêm hai nhiều ô hình ảnh:

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

Sau đó onclick gọi:

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

Answer 2

Tôi nghĩ phụ thêm hai hình ảnh trong một thẻ hình ảnh không thể thử loại này

Tạo một DIV như

này

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

Script:

Tạo một yếu tố hình ảnh và thêm nó vào 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); 
     } 

check demo này fiddle

Answer 4

Trước hết, nếu bạn thực sự muốn các hộp kiểm để hành động như ... cũng ... hộp kiểm tra, bạn nên đính kèm xử lý của mình vào sự kiện 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> 

Bạn sẽ nhận thấy tôi đã thêm một tham số khác: "this" sẽ trỏ đến phần tử đã thay đổi. Sau đó, trong chức năng của bạn, bạn có thể làm điều này:

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

Vậy làm thế nào để hiển thị nhiều hình ảnh?

Một cách là tạo động hình ảnh và nối thêm chúng như @Sibu được đề xuất (đừng quên xóa chúng khi không được chọn).

Cách khác là tạo trước các phần tử hình ảnh với "display: none" (với thuộc tính src của họ đã được thiết lập), do đó, điều duy nhất bạn phải làm là chơi với thuộc tính display.

Cá nhân tôi muốn nói option2 là tốt hơn, vì thay đổi css nhanh hơn thao tác dom.