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>

CSS

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

JavaScript

//perform variabl
var $wrapper = $("#wrapper"),
    $ch = $('input[type="checkbox"]', $wrapper);
//set green image if checked
$ch.each(function() {
    if ($(this).is(':checked')) {
        $(this).prev().addClass('high');
    }
});
//when img click, toggle class and check/uncheck checkbox
$('img').live('click',function() {
    //set ckb value
    var $ckb = $(this).next();
    $ckb.attr('checked', !$ckb.attr('checked'));
    $(this).toggleClass('high');
});

//when Checkbox change, order array NOT WORK!
$ch.live('change',function() {
if (this.checked) {
    alert('change');
$ch = $ch.not(this);//remove from jQuery 'array'
Array.prototype.push.call($ch, this);//add to end of jQuery 'array'
}
});
//when input click, print array
$("input[type=button]", $wrapper).on('click', function() {
    var str = $ch.filter(":checked").map(function(i, el) {
        return el.value;
    }).get().join(",");
    $(".value").val(str);
});