JSFiddle - React, Tailwind, and code Playground

by ynternet

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="" name="selected_something1">
<input type="hidden" value="" name="selected_something2">
<input type="hidden" value="bg_1.jpg,bg_1.jpg,bg_3.jpg" name="selected_img">
<input type="hidden" value="" name="selected_something3">

CSS

.img_container {
    padding:5px;
    display:inline-block;
}

JavaScript

var checks = document.getElements('input[type="checkbox"]');
var hidden = document.getElements('input[type="hidden"][name="selected_img"]')[0];
checks.addEvent('change',function(e){
    var checkbox = e.target;
    var img = checkbox.getPrevious('img');
    
    var checked = checkbox.get('checked');
    if(checked){
      img.setStyle('border','2px solid gray');
     //alert(img_name);
     // hidden.set('value',img_name);
    }
    else{
      img.setStyle('border',null);
     //alert(img_name);
     // hidden.set('value',img_name);
    }
    
    setInputHidden();
});

function setInputHidden(){
    var inputs_checked = document.getElements('input[type="checkbox"]:checked');  
    
    var arr_names = inputs_checked.get('name');
    hidden.set('value',arr_names.join(','));
    alert(hidden.value);
}