Image Checkbox Select

HTML

<span class="galleryImage">
    <a href="#" data-gallery="">
        <img src="http://place-hold.it/250x250/000/ffffff" />
    </a>
    <input id="1" class="chk" name="delete_CheckBox" type="checkbox" />
    <input name="delete_CheckBox" type="hidden" value="false" />
</span>

<span class="galleryImage">
    <a href="#" data-gallery="">
        <img src="http://place-hold.it/250x250/000/ffffff" />
    </a>
    <input id="2" class="chk" name="delete_CheckBox" type="checkbox" />
    <input name="delete_CheckBox" type="hidden" value="false" />
    
</span>

CSS

span.galleryImage {
    display: inline-block;
    position: relative;
}
span.galleryImage input[type=checkbox] {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 2%;
    height: 2%;
    -webkit-transition: all 0.1s ease-in-out;
}
span.galleryImage:hover input[type=checkbox], span.galleryImage input[type=checkbox]:checked {
    top: 3%;
    left: 3%;
    opacity: 1;
    width: 10%;
    height: 10%;
    -webkit-transition: all 0.1s ease-in-out;
}

JavaScript

$(".chk").change(function () {
    var someObj = {};
    someObj.checked = [];

    $(".chk").each(function () {
        if ($(this).is(":checked")) {
            someObj.checked.push($(this).attr("id"));
        } 
    });

    alert("SELECTED: " + someObj.checked);
});