JSFiddle - React, Tailwind, and code Playground

by Paulpro

HTML

<form method="GET">
    <span class="image-checkbox-container">
        <input type="checkbox" name="black-box" value="1" />
        <img src="http://dummyimage.com/40x40/000/fff.jpg" />
    </span>
    <span class="image-checkbox-container">
        <input type="checkbox" name="red-box" value="1" />
        <img src="http://dummyimage.com/40x40/f00/fff.jpg" />
    </span>
    <span class="image-checkbox-container">
        <input type="checkbox" name="green-box" value="1" />
        <img src="http://dummyimage.com/40x40/0f0/fff.jpg" />
    </span>
    <span class="image-checkbox-container">
        <input type="checkbox" name="blue-box" value="1" />
        <img src="http://dummyimage.com/40x40/00f/fff.jpg" />
    </span>
    <input type="submit">
</form>

CSS

.image-checkbox-container input[type="checkbox"]{
    display: none;
}

.image-checkbox-container img{
    border: 0;
    margin: 4px;
}

JavaScript

if(location.search)
    alert(location.search);

$('.image-checkbox-container img').live('click', function(){
    if(!$(this).prev('input[type="checkbox"]').prop('checked')){
        $(this).prev('input[type="checkbox"]').prop('checked', true).attr('checked','checked');
        this.style.border = '4px solid #38A';
        this.style.margin = '0px';
    }else{
        $(this).prev('input[type="checkbox"]').prop('checked', false).removeAttr('checked');
        this.style.border = '0';
        this.style.margin = '4px';
    }
});