JSFiddle - React, Tailwind, and code Playground

by Julian

HTML

<script src="javascript"></script>
<form id="form1" action="" method="GET" name="form1">
<div class="col-md-3">
             <img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/unchecked_checkbox.png" title="blr" id="blr"><input type="checkbox" id="imgCheck"  name="pic1" value=9></div><div class="col-md-3">
             <img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/unchecked_checkbox.png" title="blr" id="blr"><input type="checkbox" id="imgCheck"  name="pic2" value=12></div><div class="col-md-3">
          <img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/unchecked_checkbox.png" title="blr" id="blr"><input type="checkbox" id="imgCheck"  name="pic3" value=7></div>
   <input type="submit" name="submit" value="Add" />
</div>
</form>

CSS

.checked {border:solid 2px red
}

JavaScript

$('#blr').on('click', function(){
        var $$ = $(this)
        if( !$$.is('.checked')){
            $$.addClass('checked');
            $('#imgCheck').prop('checked', true);
        } else {
            $$.removeClass('checked');
            $('#imgCheck').prop('checked', false);
        }
    })