Javascript:显示带有复选框值的图像
Javascript: Displaying images with check boxes values
我目前正在使用单选按钮和复选框,以便在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">
<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);
}
检查这个演示小提琴
再添加两个图像框:
<img id="imgBox3a" src="#" style="display:none">
<img id="imgBox3b" src="#" style="display:none">
<img id="imgBox3c" src="#" style="display:none">
然后点击呼叫:
check_value(1, "3a", "accessories");
check_value(2, "3b", "accessories");
check_value(3, "3c", "accessories");
我认为在一个图像标签中添加两个图像是不可能的,试试这个
创建一个类似的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);
首先,如果你真的想让复选框像。。。好复选框,您应该将处理程序附加到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操作更快。
相关文章:
- 选中了基于图像的复选框,但未将值添加到文本字段中
- 复选框和图像根据值显示
- Javascript:显示带有复选框值的图像
- 使用jquery Find()在复选框中查找图像
- Bootstrap多选-在复选框后添加图像
- 多个复选框,如果正确,则更改背景图像(HTML/Javascript)
- 将复选框转换为图像,需要添加拖动功能才能更改图像
- 双击图像以激活复选框
- 背景图像切换和隐藏选择复选框
- 选中复选框时切换背景图像
- 将不透明度更改为复选框图像
- 从节点.js中扫描的图像中评估复选框
- 选中所有复选框 未选中标签中包含图像的所有复选框
- 生成图像的复选框
- 链接到展示柜中图像的离子复选框
- 单击时切换图像和复选框状态
- 我想在选中复选框时显示图像
- Javascript/Jquery复选框图像
- 选中复选框时需要更改图像
- JQuery自定义图像复选框代码未切换