使复选框可点击外部标签答案

【问题标题】：Make checkbox clickable outside label使复选框可点击外部标签
【发布时间】：2018-08-02 17:37:11
【问题描述】：

我在标签内有一个带有伪 div 类的复选框。我必须将复选框（div）定位为具有负右属性，这使得复选框位于标签之外且不可点击。有什么方法可以在不更改 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>

【问题讨论】：

您的需求不清楚，要点击哪里？
抱歉，已编辑问题。我需要点击复选框
你能不能像这样更新 HTML 看看<label> <span>text</span></label> <input type="checkbox"/> <div></div>
我问是否可以不更改html。否则我不会有问题:(
哎呀我的错...你使用的是 jquery 还是任何 JS

标签： html css checkbox css-position

【解决方案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 覆盖元素点击行为并根据自己的方式进行调整，从而实现同样的效果。

【讨论】：