Edit in JSFiddle

$wrapper = $("#wrapper"), $ch = $('img', $wrapper);
$wrapper.on('click', 'img', function() {
    $(this).toggleClass('high');
    clas = this.getAttribute("class");
    if (clas == 'high') {
        $ch = $ch.not(this); //remove from jQuery 'array'
        Array.prototype.push.call($ch, this); //add to end of jQuery 'array'
    }
});
$("input[type=button]", $wrapper).on('click', function() {
    var str = $ch.filter(".high").map(function(i, el) {
        return el.id;
    }).get().join(",");
    $(".value").val(str).show();
});

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

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