为什么我的复选框标签在 iPad 上不可点击？答案

【问题标题】：Why aren't the labels of my checkboxes clickable on iPad?为什么我的复选框标签在 iPad 上不可点击？
【发布时间】：2012-05-21 20:02:33
【问题描述】：

在使用 iPad 时，单击下面表单的复选框标签不会使复选框被选中。我认为这应该发生，因为输入在标签内。谢谢

    <fieldset>
        <label class="form-cont-my-sep first-my"><input type="checkbox" name="checkbox-1" />Any</label>
        <label class="form-cont-my-sep"><input type="checkbox" />1</label>
        <label class="form-cont-my-sep"><input type="checkbox" />2</label>
        <label class="form-cont-my-sep"><input type="checkbox" />3</label>
        <label class="form-cont-my-sep"><input type="checkbox" />4</label>
        <label class="form-cont-my-sep"><input type="checkbox" />5</label>
        <label class="form-cont-my-sep"><input type="checkbox" />6</label>
    </fieldset>

【问题讨论】：

它们是可点击的，并且会切换复选框的选中状态。您在哪些浏览器范围内进行了测试？页面上是否还有其他可能干扰的代码？
这是一个 iPad 问题，我更新了我的问题。谢谢

标签： html forms ipad checkbox html-input

【解决方案1】：

原来是iOS 4 bug。在fieldset 上添加一个空的onclick 可以解决此问题。

【讨论】：

【解决方案2】：

您提供的代码确实有效。

另一种方法是通过 id 创建标签和复选框之间的关联。

这是通过将id 添加到复选框并在标签上的for 属性中引用它来完成的。

<label for="myCheckboxId">Foo</label><input type="checkbox" id="myCheckboxId" />

Here's a working sample of both methods.

【讨论】：

您不需要这样做，因为 OP 将 input 作为 label 的子项，它的工作方式与您所拥有的相同（不需要 @ 987654327@ 属性）。
将复选框放在标签元素内会关联它，而不需要for 属性（IIRC 除外，在某些旧版本的 IE 中）。
这是我读到的。我也试过添加for和id，但还是不行。

【解决方案3】：

如果你把它放在标签中，它应该可以开箱即用——在这种情况下你不需要标签的“for”属性：

<label><input type="checkbox" />Any</label>

如果你把它放在外面，那么你确实需要一个'for'属性：

<label for="myCheckBox">Any</label><input type="checkbox" id="myCheckBox" />

这是 HTML 部分，但我在生产服务器上看到了一个非常奇怪的问题，即无法点击的标签。

我不知道这是否是您的情况，但这就是我的“奇怪的复选框标签之谜”：它与 CakePHP 1.3 和 FormHelper 有关。经过一番摆弄，问题原来是 CentOS 的“与 perl 兼容的正则表达式”软件包的版本非常旧。升级到较新的解决了它。我认为包名称是“pcre ...”。

【讨论】：

【解决方案4】：

我也遇到过这个问题。在我的例子中，设计是一个自定义的复选框/收音机实现，这意味着原始的复选框/收音机被完全隐藏，让用户无法改变他们的选择。

标签内还有表单元素。上面的 Fieldset 解决方案什么也没做。使用for="<field-id>" 将标签绑定到表单元素也不起作用。

起作用的是：

<label onclick="this.querySelector('input').click()">
    <input type="radio" />
</label>

【讨论】：