我怎么做一个复选框切换点击文本标签以及?

miure 发布于 2018-02-09 checkbox 最后更新 2018-02-09 01:04 414 浏览

HTML表单中的Checkboxes没有隐含的标签。在旁边添加显式标签(某些文本)不会切换checkbox如何通过点击文字标签来切换复选框?

已邀请:

ysequi

赞同来自:

如果您正确地标记您的HTML代码,则不需要JavaScript。下面的代码将允许用户点击标签文本勾选复选框。

<label for="surname">Surname</label>
<input type="checkbox" name="surname" id="surname" />
标签元素上的 for 属性链接到输入元素上的 id 属性,浏览器完成其余部分。 这一直在测试工作在:
  • IE6
  • IE7
  • 火狐

grem

赞同来自:

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

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

ysequi

赞同来自:

罗尼, 如果您想将标签文本和复选框放在包装元素中,可以执行以下操作:

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

miure

赞同来自:

用标签包装仍然不允许点击“盒子中的任何地方” - 仍然在文本上! 这为我做了这个工作:

<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,有效地切换两次。

nnihil

赞同来自:

将标签的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>

lenim

赞同来自:

正如@Gatekiller和其他人所指出的,正确的解决方案是< label>标签。 点击的文本是好的,但还有另一个原因使用<标签>标签:可访问性。视障人士用来访问网络的工具需要< label>来读出复选框和单选按钮的含义。如果没有< label>,他们必须根据周围的文本进行猜测,而且他们经常会错误的或者不得不放弃。 阅读“请选择您的送货方式,radio-button1,radio-button2,radio-button3”的表单非常令人沮丧。 请注意,网络无障碍是一个复杂的话题; < label>是必要的步骤,但它们不足以保证在适用的情况下可访问性或符合政府法规。

riure

赞同来自:

这应该工作:

<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>
如果没有,请纠正我!

dmodi

赞同来自:

您只需将复选框包装在标签标签中即可

 <label style="height: 10px; width: 150px; display: block; ">
  [Checkbox Label Here] <input type="checkbox"/>
 </label>
FIDDLE 或者也可以使用下面的复选框的标签和 id for 属性
<label for="other">Other Details</label>
<input type="checkbox" id="other" />
FIDDLE