使用jQuery扩展复选框周围的可点击区域

Question

我正在设计一个使用浏览器提供的标准复选框的任务列表.但恕我直言,复选框区域太小而且难以点击,特别是如果您正在进行半功率用户风格点击多个复选框(对于不了解键盘快捷键但想要进行大量存档,删除等的用户) . 一次全部).

有没有什么方法可以使复选框周围的区域可点击,比如说它附近有5px的额外填充？我正在使用jQuery作为我的主要客户端代码,但我不反对使用普通的旧JS,如果它更有意义.

哦,我并不是真的在寻找一个插件.这里有一些轻量级的东西.

提前干杯!

Answer 1

这是一个老帖子,但我只是尝试做同样的事情,填充/大小调整没有对"命中"区域产生影响.我在容器上使用jQuery来保存复选框(在这种情况下是一个td,因为我有一个网格,但div应该工作):

HTML

<td class="expandCheck">
  <input type="checkbox" name="cfg[][]">
</td>

JS

$(".expandCheck").on('click', function (e) {
    cb = $(e.target).children(":checkbox");
    cb.attr("checked", !cb.attr("checked"));
});

Answer 2

截至 2016 年在 chrome 中工作：

<style>
.cb{
    position: relative;
    margin:0;
}
.cb:before {
    content:'';
    position: absolute;
    top:-10px;
    bottom:-10px;
    left:-10px;
    right:-10px;
}
</style>

<input type="checkbox" class="cb" />

Answer 3

您可以使用与复选框关联的标签吗？然后单击标签本身将选中/取消选中该框。