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

问题描述：

单击下面表单的复选框标签时，不会在使用iPad时选中该复选框。我认为这应该发生，因为输入是在标签内。谢谢为什么我的复选框的标签不能在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>

他们是可以点击的，和他们做切换复选框的选中状态。你测试过哪些浏览器？网页上是否有其他可能会干扰的代码？ – Quentin

它正在工作，您使用什么浏览器？ http://jsfiddle.net/9WB64/ –

它的iPad问题，我更新了我的问题。谢谢 – Evans

答

原来这是一个iOS 4 bug。在fieldset上增加一个空的onclick解决了这个问题。

答

你给出的代码确实有效。

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

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

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

Here's a working sample of both methods。

你不需要这样做，因为OP有'input'作为'label'的子元素，它的工作方式和你所拥有的一样（不需要for属性）。 –

将复选框放在标签元素中，不需要for属性（在某些旧版本的IE中除外，IIRC）。 – Quentin

这是我阅读的内容。我也尝试添加for和id，但它仍然不起作用。 – Evans

答

如果你把它都应该开箱的标签 - 你不需要一个“的”属性的标签在这种情况下：

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

如果你把外面的那么你就需要一个“的”属性吧：

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

这是事物的HTML的一部分，但我看到一个很奇怪的问题与在生产服务器上无法点击标签。

我不知道这是你的情况，但这里是我的“奇怪的复选框标签神秘”是：它必须与CakePHP 1.3和它的FormHelper。经过一番捣乱之后，事实证明CentOS的“perl兼容正则表达式”包是一个非常旧的版本。升级到一个新的修复它。我认为包名是“pcre ...”。

答

我也遇到过这个问题。在我的情况下，设计是一个自定义复选框/无线电实现，这意味着原始复选框/收音机完全隐藏，使用户无法改变其选择。

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

什么做的工作是：

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

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

相关推荐