Why do checkboxes work incorrectly?

Question

css

I have checkboxes:

<label><input type="checkbox"> 1  </label>					          
<label><input type="checkbox"> 2 </label>					          
<label><input type="checkbox"> 3  </label>				          
<label><input type="checkbox"> 4 </label>

The label has the following handler:

function(e) {
  if ($(this).find('input').prop('checked')) {
    $(this).find('input').prop('checked', false);
  } else {
    $(this).find('input').prop('checked', true);
  }
}

For some reason, when you click on the label, the CHECKBOX is ticked, and when you click on the checkbox itself, nothing happens. Another handler is attached to the label, but I don’t think it interferes in any way

Answer 1

Why do you need this handler? When you click on the label, the associated checkbox is automatically checked without it, but this action is performed twice (when you click on the checkbox) and nothing happens.