JSFiddle - React, Tailwind, and code Playground

by ynternet

HTML

<form>
    <div class="img_container">
        <img src="http://ynternet.sk/test/bg_1.png" class='selected' />
        <br />
        <input type="checkbox" name="bg_1.jpg" checked="yes" />
    </div>
    <div class="img_container">
        <img src="http://ynternet.sk/test/bg_2.png" class="selected" />
        <br />
        <input type="checkbox" name="bg_2.jpg" checked="yes" />
    </div>
    <div class="img_container">
        <img src="http://ynternet.sk/test/bg_3.png" class="selected" />
        <br />
        <input type="checkbox" name="bg_3.jpg" checked="yes" />
    </div>
    <input type="hidden" value="bg_1.jpg,bg_1.jpg,bg_3.jpg" name="selected_img">

CSS

.img_container {
    padding:5px;
    display:inline-block;
}
.selected {
    border: 2px solid gray
}

JavaScript

$('input[type=checkbox]').on('change', function (e) {
    if ($(this).is(':checked')) {
        $(this).parent().find('img').addClass('selected');
    } else {
        $(this).parent().find('img').removeClass('selected');
    }

    setInputHidden();
});

function setInputHidden() {
    var arr_names = [];
    $('input[type="checkbox"]:checked').each(function () {
        arr_names.push($(this).attr('name'));
    });
    $('input[type=hidden][name=selected_img]').val(arr_names.join(','));
    alert($('input[type=hidden][name=selected_img]').val());
}