如何通过复选框的结果更改图片的来源 [英] how to change the source of a picture by the outcome of checkboxes
本文介绍了如何通过复选框的结果更改图片的来源的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我制作了一个包含多个复选框和单选表格的菜单.当访客选择他的选择时，我需要一个脚本来显示他选择的选项.只能有一种选择，并且有500多种选择.我可以使用复选框的结果来使用Java更改图像的来源吗?RadioForm1:大小
I made a menu with multiple checkboxes and radio forms. When the visitor selects his choices I need a script to show which option he chose. There is only one option possible and there are over 500 choices. Can I use the outcome of the checkboxes to change the source of the image using java? RadioForm1: Size
小中(选定)大
Radioform2:颜色:蓝色的绿色的红色的黄色(已选中)橙色
Radioform2: Color: Blue Green Red Yellow (selected) Orange
src:Images/medium/yellow/img.png
src:Images/medium/yellow/img.png
推荐答案
<html><head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$( document ).ready( function() {
var colors = $( '.color' ),
sizes = $( '.size' ),
img = $( '#image' ),
changeHandler = function( evt ){
var path = [ 'Images', sizes.filter(':checked').val(), colors.filter(':checked').val(), 'img.png' ].join('/');
img.attr( 'src', path );
// img.attr( 'alt', path );
console.log( path );
};
colors.on( 'change', changeHandler );
sizes .on( 'change', changeHandler )
.change();
} );
</script>
</head>
<body>
<fieldset>
<legend>Color</legend>
<div>
<input class="color" name="color" value="Red" id="color_red" checked="checked" type="radio">
<label for="color_red">Red</label>
</div>
<div>
<input class="color" name="color" value="Yellow" id="color_yellow" type="radio">
<label for="color_yellow">Yellow</label>
</div>
<div>
<input class="color" name="color" value="Blue" id="color_blue" type="radio">
<label for="color_blue">Blue</label>
</div>
</fieldset>
<fieldset>
<legend>Size</legend>
<div>
<input class="size" name="size" value="Small" id="size_small" checked="checked" type="radio">
<label for="size_small">Small</label>
</div>
<div>
<input class="size" name="size" value="Medium" id="size_medium" type="radio">
<label for="size_medium">Medium</label>
</div>
<div>
<input class="size" name="size" value="Large" id="size_large" type="radio">
<label for="size_large">Large</label>
</div>
</fieldset>
<img id="image" src="Images/Small/Red/img.png" height="100px" width="100px">
</body></html>
这篇关于如何通过复选框的结果更改图片的来源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
