Use DIV mask to solve the problem of invalid checkbox directly selected by mouse_HTML/Xhtml_Web page production

During the front-end development process, I encountered a situation that required checking. For the convenience of user operations, the click event was placed on the DIV. (Knockout.js is used)

The code is roughly as follows:

But there is a strange phenomenon when writing like this. Clicking the div with the mouse works fine.

But it is not normal to directly check the checkbox with the mouse:

The checkbox is in an unchecked state, and the checkbox is checked by clicking the mouse directly. At this time, the following should be achieved: 1. Execute the clickevent event of the div; 2. , after the event is executed, the checkbox is in the checked state.

But the final result is that the checkbox is still unchecked.

The tracking debugging result is that when the clickevent event is executed, the checkbox is still in the checked state, but after the clickevent is executed, the jquery code execution is entered. After two or three steps, the checkbox is changed to Unselected state.

The reason has not yet been found. (The radiobox used in another place has a similar situation)

There is no other way but to work around it. By covering the checkbox with a layer of div, so that when the mouse clicks, the div is clicked instead of the checkbox. Through clickevent Change the checkbox status (there is code to change the checkbox status in the clickevent event)

is implemented as follows: