5

私は現在、ラジオボタンとチェックボックスを使用して、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">
4

4 に答える 4

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");
于 2012-09-08T06:15:11.160 に答える
0

まず、実際にチェックボックスをチェックボックスのように動作させたい場合は、ハンドラーを 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>

別のパラメーターを追加したことに気付くでしょう。「this」は、変更された要素を指します。次に、関数でこれを行うことができます：

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

では、複数の画像を表示するにはどうすればよいでしょうか。

1 つの方法は、画像を動的に作成し、@Sibu が提案するように追加することです (チェックされていない場合でも、それらを削除することを忘れないでください)。

もう 1 つは、「display:none」(src 属性が既に設定されている) を使用して画像要素を事前に作成しておくことです。その場合は、display 属性をいじるだけです。

個人的には、CSS の変更は dom 操作よりも高速であるため、option2 の方が優れていると思います。

于 2012-09-08T06:53:09.960 に答える
0

1つの画像タグに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);
于 2012-09-08T06:05:47.830 に答える