Javascript 如何通过复选框的结果更改图片的来源_Javascript_Forms

Javascript 如何通过复选框的结果更改图片的来源

javascript forms

Javascript 如何通过复选框的结果更改图片的来源,javascript,forms,Javascript,Forms,我制作了一份包含多个复选框和无线电表单的菜单。当访问者选择他的选项时，我需要一个脚本来显示他选择了哪个选项。只有一种可能的选择，有500多种选择。我可以使用复选框的结果使用java更改图像的源吗？无线电格式1：大小小的中等（已选）大的无线电格式2：颜色：蓝色绿色红色黄色（已选）橙色的 src:Images/medium/yellow/img.png $（文档）.ready（函数（）{ 变量颜色=$（'.color'），大小=$（'.size'）， img=$（“#图像

我制作了一份包含多个复选框和无线电表单的菜单。当访问者选择他的选项时，我需要一个脚本来显示他选择了哪个选项。只有一种可能的选择，有500多种选择。我可以使用复选框的结果使用java更改图像的源吗？无线电格式1：大小

小的中等（已选）大的

无线电格式2：颜色：蓝色绿色红色黄色（已选）橙色的

src:Images/medium/yellow/img.png


$（文档）.ready（函数（）{
变量颜色=$（'.color'），
大小=$（'.size'），
img=$（“#图像”），
changeHandler=函数（evt）{
var path=['Images'，size.filter（':checked'）.val（），colors.filter（':checked'）.val（），'img.png'].join（'/'）；
img.attr（'src'，path）；
//img.attr（'alt'，path）；
console.log（路径）；
};
颜色。on（'change'，changeHandler）；
大小。打开（'change'，changeHandler）
.change（）；
} );
颜色
红色
黄色的
蓝色
大小
小的
中等
大的

当你有单选按钮时，项目符号会显示选中了哪一个，也许你想做更高级的事情？是的，我正在寻找一种方法来获取脚本，获得不同单选表单的结果，然后将其粘贴到PictureGraat的源代码中！非常感谢MT0！这正是我要找的。你真的帮了我的忙！

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