Jquery 如何增加触摸屏复选框的可点击区域

我试图增加标签中复选框的可点击区域

然而，其中也有2个锚定标签，当我尝试单击平板电脑上的复选框时，我会被重定向到超链接，因为复选框的可单击区域很小，但锚定标签的区域更大

我需要让它们都可以在平板电脑上点击，但也可以点击复选框

以下是当前布局：

因为我也不能将：before作为jQuery上的DOM元素来寻址，所以我也不能修改它。 有什么建议吗

[type="checkbox"]:not(:checked)+label:before,
[type="checkbox"]:checked+label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 1px;
    width: 16px;
    height: 16px;
    border: 1px solid #000;
    background: transparent;
}

我同意和。

我不明白peudo元素在标签之前生成正方形的原因

我建议您根据屏幕大小使用一些规则更改复选框大小：

@媒体屏幕和（最大宽度：736px）{
[type=“checkbox”]{
宽度：2米；
高度：2米；
transform:translateY（0.5em）；/*将其向下移动一点*/
}
}

我同意和。

请同时分享您的html@TVBZ共享了上面的相关html代码。谢谢，你好！在项目中增加复选框的可点击区域。单击标签（锚定标记除外）时，也会选中该复选框。问题是，我不能编辑布局，所以它应该保持不变。您是否有其他可以增加可点击区域的建议？«当您使用

for=

属性点击标签时，复选框也会被选中？复选框是在标签内还是在标签外？（我假设是外部的，因为您发布了CSS）。如果伪元素是由表单元素、链接或具有tabindex属性的元素生成的，则可以单击它。带有标签和复选框的示例：它们可以用来增加可点击区域@G-Cyr:mmm好的，我记得JS/jQuery无法访问伪元素。。。所以你是对的。我建议您使用OP的HTML发布您的答案。；）不，它在标签内，我在标签中使用属性。我需要对代码进行一些编辑，因为无法共享所有代码。我正在寻找一个基于jQuery或javascript的解决方案，基于点击事件，因为这是我能想到的解决方案。你认为可以通过重叠某个区域的其他元素来增加可点击区域吗？

<label class="form-label checkout-label">
 <span class="form-label-forced-span">
 I agree with the <a href="$url('Page-Show', 'cid', 'policy-link')$" 
 target="_blank" aria-label="confidentiality and protection 
 policy">confidentiality and protection policy</a> and <a href="$url('Page- 
 Show', 'cid', 'terms-and-uses')$" target="_blank" aria-label="the terms of use">the 
 terms of use</a>.
 </span>
</label>