Checkbox input is selected only when clicked outside

Question

I have an issue with HTML which is generated via the GWT framework. It seems that the checkbox can be selected only outside of input.

  <label for="gwt-id">
        <input type="checkbox" id="gwt-id" />
        <span class="someclass"></span>
    </label>

As you can see, there is for property. When I remove it then the checkbox can't be selected at all. I didn't copy styles, because even after removing them it does not work. Any ideas why is it happening?

Hm okay, then it can even be a css or javascript issue. Could you isolate the problem a bit more, maybe setup a codepen example so we can have a better understanding of at what's happening? — Sjors, Mar 12 '21 at 09:44

score 0 · Answer 1 · answered Mar 12 '21 at 09:59

You can take a look at this thread. But it will require some code. Something like this:

document.addEventListener("click", function(evt) {
    var flyoutElement = document.getElementById('flyout-example'),
        targetElement = evt.target;  // clicked element

    do {
        if (targetElement == flyoutElement) {
            // This is a click inside. Do nothing, just return.
            document.getElementById("flyout-debug").textContent = "Clicked inside!";
            return;
        }
        // Go up the DOM
        targetElement = targetElement.parentNode;
    } while (targetElement);

    // This is a click outside.
    document.getElementById("flyout-debug").textContent = "Clicked outside!";
});

If you want, you can use an external library. Or with Vue.js and React.js

Checkbox input is selected only when clicked outside

1 Answers1