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

debugcn 发表于 Dev

汤姆·维瑟（Tom Visser）

我做了一个包含多个复选框和单选表格的菜单。当访客选择他的选择时，我需要一个脚本来显示他选择的选项。只能有一种选择，并且有500多种选择。我可以使用复选框的结果来使用Java更改图像的来源吗？结构体 RadioForm1：大小

小中（已选择）大

Radioform2：颜色：蓝色绿色红色黄色（已选择）橙色

src：Images / medium / yellow / img.png

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。