JSFiddle - React, Tailwind, and code Playground

by sperske

HTML

<form>
    <div class="img_container">
        <img src="http://ynternet.sk/test/bg_1.png" style="border:2px solid gray;" />
        <br />
        <input type="checkbox" name="bg_1.jpg" checked="yes" />
    </div>
    <div class="img_container">
        <img src="http://ynternet.sk/test/bg_2.png" style="border:2px solid gray;" />
        <br />
        <input type="checkbox" name="bg_2.jpg" checked="yes" />
    </div>
    <div class="img_container">
        <img src="http://ynternet.sk/test/bg_3.png" style="border:2px solid gray;" />
        <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;
}

JavaScript

$('input[type=checkbox]').on('change', function (e) {
    if ($(this).is(':checked')) {
        $(this).prev('img').css('border', '2px solid gray');
    } else {
        $(this).prev('img').css('border', null);
    }
    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());
    alert($('input#selected_img').val());
}