Checkbox image replacement

HTML

<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" class="blr" />
        <input type="checkbox" class="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" class="blr" />
        <input type="checkbox" class="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" class="blr" />
        <input type="checkbox" class="imgCheck" name="pic3" value=7 />
    </div>
    <input type="submit" name="submit" value="Add" />
    </div>
</form>

CSS

.checked {
    border:solid 2px red
}

JavaScript

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