锚标记内的输入复选框答案

【问题标题】：Input checkbox inside an anchor tag锚标记内的输入复选框
【发布时间】：2018-10-22 12:22:47
【问题描述】：

我的 html 代码中有以下结构。由于不可避免的情况，我无法更改 html 结构。我希望链接和复选框都独立工作。这如何通过 Javascript 或 Jquery 来完成？

<a href="#">
  <span class="fa fa-chevron-right blue"></span> 
  Early Math
  <label class="label-checkbox">
    <input type="checkbox" data-field-type="checkbox"><i class="fa fa-2x icon-checkbox"></i>
  </label>
</a>

【问题讨论】：

stackoverflow.com/questions/8094483/… 的可能重复项
如果不修改 HTML，这是不可能的，因为您当前的结构完全无效；您不能嵌套可点击元素（即a 内的label 和input）
你的意思是jsfiddle.net/0e294ax6
@Mohammad 仅供参考，我无法选中该复选框。这就是我上面提到的问题
@RoryMcCrossan 你的权利:)

标签： javascript jquery html

【解决方案1】：

我不相信锚内的复选框可以可靠地工作。但是即使你无法直接更改 HTML，你仍然可以通过 Javascript/JQuery 来操作它：

$(document).ready(() => {
    $('a input').insertAfter("a");
});

（假设只有一个<a> 标签和一个<input> 标签）。

【讨论】：