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

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

Answer 3

在创建可在IE8中使用的可点击图片标签时，我设置了标签的边距和填充，以覆盖我想要点击的复选框周围的区域。效果是一个大的可点击区域，覆盖标签，复选框和一些额外的空格。

label {
    margin-left: -23px;
    padding-left: 28px;
}

边距向左移动，填充将标签文本推回原位。

此方法的方法：http://jsfiddle.net/wydKV/

Answer 4

这是最好的解决方案，我使用它并且完美运行：点击此处http://schoberg.net/2008/10/making-better-forms-clickable-text-for-radio-button-and-checkbox-fields/

或只是将此HTML代码用于单选按钮或复选框：

CHECKBOX：

<label for="RememberMe">
<input type="checkbox" name="RememberMe" id="RememberMe" value="yes" />
Remember me on this computer.
</label>

RADIO BUTTONS：

<label for="goodIdea">
<input type="radio" name="idea" id="goodIdea" value="good" />
Good Idea
</label>
<br />
<label for="badIdea">
<input type="radio" name="idea" id="badIdea" value="bad" />
Bad Idea
</label>

Answer 5

自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 6

我倾向于同意Karl Gohery--对于这种事情，标签是表格中的默认选项......不仅用于视觉目的，而且从可访问性的角度来看 - 设计良好的表格应该包含支持WAI标准的字段集，图例和标签

Answer 7

如果您尝试使用CSS解决此问题，可能会遇到跨浏览器问题，原因如here所述。但是，您实际上并不需要使用javascript。

Alin回答用标签包围复选框是最好的方法。它是valid HTML，如果您使用表格列来表示所选行，也可以保留实际标签文本。

Working JSFiddle example.

<style>
  td label {
    display: table-cell;
    vertical-align: middle;
    border: solid black 1px;
    width: 40px;
    height: 40px;
    text-align: center;
  } 
</style>

<table>
  <tr>
    <td>
      <label for="item1">
          <input type="checkbox" id="item1" name="item[]" value="item2" />
      </label>
    </td>
  </tr>
</table>

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

7 个答案: