5

我目前正在使用单选按钮和复选框在 javascript 的帮助下显示图像。具体来说：我在处理复选框和显示图像时遇到了问题。使用单选按钮，该类别只会显示一个图像。但是对于复选框，需要显示多个图像。例如，用户可以检查夹克和手套的字段，并且将显示两张图片。

单击复选框时如何格式化该功能以显示多张图片？ 例子

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

再添加两个图像框：

<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

我认为不可能在一个图像标签中附加两个图像试试这个

像这样创建一个 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 回答
0 
<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);
      }

检查这个演示小提琴

于 2012-09-08T06:19:58.800 回答
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.
    }
}

那么如何显示多张图片呢？

一种方法是动态创建图像并像@Sibu 建议的那样附加它们（不要忘记在它们未选中时删除它们）。

另一种方法是使用“display:none”（已经设置了它们的 src 属性）预先创建了图像元素，所以你唯一要做的就是使用 display 属性。

我个人会说 option2 更好，因为 css 更改比 dom 操作更快。

于 2012-09-08T06:53:09.960 回答