Display image one by one - image

Question

I have a checkbox in my form that will display images when an item is checked .
Is it possible that the images will be displayed one by one every time an item is clicked because at the moment , every time I checked an item on the checkbox , it is displayed on the div that I assigned .
What I want to achieve is , when an item is checked , it will be displayed and when I clicked another item , the previous image will be overridden by the new item that was checked .
I assigned an ID and class in the image and here is my JS :
jQuery(document).ready(function( $ ){
$(function() {
$('.decalcheckbox input[type=checkbox]').on("change",function() {
var checkbox = $(this).val().toLowerCase();
var checkboxremovespace = checkbox.replace(/ /g, "_")
$('#decal_'+ checkboxremovespace).toggle(this.checked);
}).change(
); // trigger the change
});
});
Sorry for my English but I hope I explained what I want to say .
Thanks .

Answer 1

I just made some modification on my code as follows .
Hopefully someone can shed some light .
jQuery(document).ready(function( $ ){
$(function() {
$('.decalcheckbox input[type=checkbox]').on("change",function() {
if ($(this).is(':checked')) {
$("#bento_preview_item").hide();
}
else{
$("#bento_preview_item").show();
}
var checkbox = $(this).val().toLowerCase();
var checkboxremovespace = checkbox.replace(/ /g, "_")
$('#decal_'+ checkboxremovespace).toggle(this.checked);
}).change(
); // trigger the change
});
});
Thanks .