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

$ch = [];
var $wrapper = $("#wrapper");
    $('input[type="checkbox"]', $wrapper).each(function(index) {
    if ($(this).is(':checked')) {
    $(this).prev().addClass('high');
    $ch.push(index+1);
    }
});

$('img,input[type="checkbox"]', $wrapper).live('click', function() {
    if($(this).prop("type") === 'checkbox'){
        var $ckb = $(this);  
        $(this).prev().toggleClass('high');
    }else{
        var $ckb = $(this).next(); 
        $ckb.attr('checked', !$ckb.attr('checked'));   
        $(this).toggleClass('high');
    }
    index = $('input[type="checkbox"]', $wrapper).index($ckb);
    if($ckb.is(":checked")){
       $ch.push(index+1);
    }else{
      $ch.splice($ch.indexOf(index),1); 
   } 
 
   });

$("input[type=button]", $wrapper).click(function() {
    $('.value').val($ch);
});