HTML表单中的Checkboxes没有隐式标签 在其旁边添加显式标签(某些文本)不会切换checkbox

如何通过单击文本标签来切换复选框?

===============>>#1 票数:44

如果您正确标记HTML代码,则无需使用javascript。 以下代码将允许用户单击标签文本以勾选复选框。

<label for="surname">Surname</label>
<input type="checkbox" name="surname" id="surname" />

label元素的for属性链接到input元素的id属性,浏览器完成剩下的工作。

这一直在测试工作:

  • IE6
  • IE7
  • 火狐

===============>>#2 票数:20 已采纳

将标签的CSS display属性设置为块元素并使用它而不是div - 它保留标签的语义含义,同时允许您喜欢的任何样式。

例如:

 label { width: 100px; height: 100px; display: block; background-color: #e0e0ff; } 
 <label for="test"> A ticky box! <input type="checkbox" id="test" /> </label> 

===============>>#3 票数:3

正如@Gatekiller和其他人所指出的,正确的解决方案是<label>标签。

单击文本很好,但使用<label>标签还有另一个原因:可访问性。 视障人士用来访问网络的工具需要<label>来读出复选框和单选按钮的含义。 如果没有<label>,他们必须根据周围的文字进行猜测,他们经常会弄错或者不得不放弃。

面对“请选择您的送货方式,收音机按钮1,收音机按钮2,收音机按钮3”的表格非常令人沮丧

请注意,Web可访问性是一个复杂的主题; <label>是必要的步骤,但它们不足以保证在适用的情况下可访问性或遵守政府法规。

===============>>#4 票数:2

罗尼,

如果要将标签文本和复选框括在包装元素中,可以执行以下操作:

<label for="surname">
    Surname
    <input type="checkbox" name="surname" id="surname" />
</label>

===============>>#5 票数:1

您可以将复选框包装在标签中:

<label style="display: block; padding: 50px 0 0 50px; background-color: pink; width: 80px; height: 80px">
  <input type="checkbox" name="surname">
</label>

===============>>#6 票数:0

您需要将复选框包装在label标签中,就像这样

 <label style="height: 10px; width: 150px; display: block; ">
  [Checkbox Label Here] <input type="checkbox"/>
 </label>

小提琴

或者您也可以使用标签的for属性和您的复选框的ID ,如下所示

<label for="other">Other Details</label>
<input type="checkbox" id="other" />

小提琴

===============>>#7 票数:-1

这应该工作:

<script>
function checkbox () {
    var check = document.getElementById("myCheck").checked;
    var box = document.getElementById("myCheck")

    if (check == true) {
        box.checked = false;
    }
    else if (check == false) {
        box.checked = true;
    }
}
</script>
<input type="checkbox"><p id="myCheck" onClick="checkbox();">checkbox</p>

如果它没有,请求我核心!

===============>>#8 票数:-2

使用标签包装仍然不允许点击“框中的任何位置” - 仍然只是在文本上! 这对我有用:

<div onclick="dob.checked=!dob.checked" class="checkbox"><input onclick="checked=!checked" id="dob" type="checkbox"/>Date of birth entry must be completed</div>

但不幸的是有很多javascript有效切换两次。

  ask by Ronnie translate from so

未解决问题?本站智能推荐: