Question

我目前正在使用复选框和单选按钮，根据所选值显示图片。我已经能够获得大部分工作。问题：复选框选中的值显示图像但未选中时它不会删除图片。如果取消选中该复选框，是否可以删除图片？ EXAMPLE

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>

Answer 1

您必须检查是否选中了复选框。

要添加条件以查看是否选中了复选框，您需要引用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/

Answer 2

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

调用函数onchange check_value（this，2，“3b”，“accessories”）

复选框和图像显示基于值

2 个答案: