How To Change The Source Of A Picture By The Outcome Of Checkboxes
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 th
Solution 1:
<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>
Post a Comment for "How To Change The Source Of A Picture By The Outcome Of Checkboxes"