2

現在、選択した値に基づいて画像を表示するチェックボックスとラジオボタンを使用しています。ほとんどすべてが機能するようになりました。問題：チェックボックスを選択した値は画像を表示しますが、チェックを外しても画像は削除されません。チェックボックスがオフになっているときに画像を削除する方法はありますか？例

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>
4

2 に答える 2

2

チェックボックスが選択されているかどうかを確認する必要があります。

check_valueチェックボックスがチェックされているかどうかを確認する条件を追加するには、関数のチェックボックスへの参照が必要です。

check_valueしたがって、関数に引数を追加します。sourceElement

function check_value(sourceElement, val, id, type)

この関数をthis：で呼び出します。

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

そして、sourceElementを使用して、チェックボックスがオンになっているかどうかを確認します。

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

例： http： //jsfiddle.net/nivas/9cKEz/

于 2012-09-08T15:41:32.873 に答える
0 
<script>
function check_value(el1,val, id, type) {     

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

  }   

  }      
</script>

関数onchangecheck_value（this、2、 "3b"、 "accessories"）を呼び出します

于 2012-09-08T15:47:51.787 に答える