JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
<span><img src="http://lorempixel.com/100/100" alt="" class="" /><input type="checkbox" value="1" name="img[]" /></span> <span><img src="http://lorempixel.com/100/100" alt="" class="" /><input type="checkbox" value="2" name="img[]" /></span> <span><img src="http://lorempixel.com/100/100" alt="" class="" /><input type="checkbox" value="3" name="img[]" checked="checked"/></span> 
<input type="button" value="Serialize" />
<input type="text" name="text" class="value" size="32" />
</div>
<p></p>

CSS

img{border:2px solid #f00;}
img.high{border:2px solid #0f0;}

JavaScript

$('input:checkbox').each(function() {
    ($(this).is(':checked')) ? $(this).prev().addClass('high') : '';
});

//al click sull'immagine attivo il checkbox
$('img').click(function() {
    var $checkbox = $(this).next();
    $checkbox.attr('checked', !$checkbox.attr('checked'));
    $(this).toggleClass('high');
    if($checkbox.checked){
        $('p').text('vero');
    }
});

//sviluppo l'array che si è creato
$('input[type=button]', '#wrapper').click(function() {
    var str = $('input[type=checkbox]', '#wrapper').filter(":checked").map(function(i, el) {
        return el.value;
    }).get().join(',');
    $(".value").val(str);
});