使复选框可单击外部标签

Question

我在标签内有一个带有伪div类的复选框。我必须将checkbox（div）设置为具有负的right属性，这会使复选框在标签之外并且不可点击。有什么方法可以使复选框可单击而不更改html？

input[type="checkbox"] + div::before {
     right:-35px !important;
      left:auto !important; }

    input[type="checkbox"] + div::after {
     left:auto !important;
      right:-33px !important;
       width:auto; }

<label>
     <span>text</span>
      <input type="checkbox"/>
       <div></div>
    </label>

Answer 1

document.getElementById("text").setAttribute('onclick','doThis(event)');

document.getElementById("label").setAttribute('onclick','doThat()');

function doThis(event){
event.preventDefault()
}

function doThat(){
 alert('normal label click');
}

input[type="checkbox"] + div::before {
     right:-35px !important;
      left:auto !important; }

    input[type="checkbox"] + div::after {
     left:auto !important;
      right:-33px !important;
       width:auto; }

<label>
     <span id="text">text</span>
      <input type="checkbox"/>
       <div></div>
    </label>

您可以通过覆盖元素点击行为并进行调整来通过JavaScript实现相同的目的。