JSFiddle - React, Tailwind, and code Playground

by forgetcolor

HTML

<a><label><input type="checkbox" /></label>link text</a>
<div id="output"></div>

CSS

label {
    padding:5px 15px;
    border:1px solid blue;
}
a {
    padding:5px;
    border:1px solid red;
    background-color:#eee;
}

a:hover { background-color:#ddd; }
#output { margin: 10px; }

JavaScript

var checkboxclicked = false;

$('a').click(function() { 
    if(checkboxclicked) return;
    $('#output').text("link got click");
    setTimeout(function() {
        $('#output').text("");
    }, 500);
});

$('input, label').click(function() {
    checkboxclicked = true;
    setTimeout(function() {
        checkboxclicked = false;
    }, 250);
});