JSFiddle - React, Tailwind, and code Playground

by aslancods

HTML

<div class="div-styled js-div">
    <input type="radio" />
</div>

CSS

.div-styled {
    width: 100px;
    height: 100px;
    background-color: #ececec;
}
.div-styled input { opacity: 0 }
.div-styled.checked {
    border: 1px solid #ddd;
}

JavaScript

$(".js-div").on("click", function (event) {
    var target = $(event.target);
    //if (target.is('input:radio')) return;
    var checkbox = $(this).find("input[type='radio']");

    if ( checkbox.prop("checked") ) {
        checkbox.prop("checked", false);
        //$('input:radio').filter(':checked').parent().addClass('checked'); 
        target.removeClass('checked');
    } else {
        checkbox.prop("checked", true);
        target.addClass('checked');
    }
});