Question

点击下面表单复选框的标签不会在使用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>

Answer 1

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

Answer 2

你给出的代码确实有效。

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

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

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

Here's a working sample of both methods

Answer 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 ...”。

Answer 4

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

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

工作是什么：

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

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

4 个答案: