Javascript：チェックボックスの値で画像を表示

Question

現在、ラジオボタンとチェックボックスを使用して、JavaScriptを使用して画像を表示しています。具体的には、チェックボックスをオンにして画像を表示する際に問題が発生しています。ラジオボタンを使用すると、そのカテゴリの画像が1つだけ表示されます。しかし、チェックボックスを使用すると、複数の画像を表示する必要があります。例えば、ユーザはジャケットと手袋のフィールドをチェックすることができ、両方の画像が表示される。

チェックボックスをクリックしたときに複数の画像を表示するにはどうすれば機能をフォーマットできますか？​​

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

に追加し、さらに2つの画像ボックス：

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

次にonclickの呼び出し：

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

Answer 2

私は、タグが不可能な一枚の画像に2枚の画像を追加すると思います。この

この

ようにDIVを作成してみてください

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

スクリプト：

追加Image要素を作成し、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); 
     } 

チェックこのデモすべてのfiddle

Answer 4

まず、あなたが実際にチェックボックスがチェックボックス...よく...のように行動したい場合、あなたはの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> 

別のパラメータを追加したことに気付くでしょう： "これは"変更された要素を指します。複数の画像を表示するには、どのように

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

： は、その後、あなたの機能であなたがこれを行うことができますか？

@Sibuのように画像を動的に作成して追加する方法もあります（チェックが外されているときに削除することを忘れないでください）。

もう一つは、 "display：none"（src属性がすでに設定されている）イメージ要素を事前に作成しておき、表示属性で再生するだけです。

個人的には、CSSの変更がDOMの操作よりも速いため、私はoption2が優れていると言います。