Question

我正在努力确保我的webapp符合HTML5，并且通过这样做我发现了HTML5错误。我目前正在使用以下代码：

<label><div class="someClass"><input type="checkbox" name="ChkBox[]" value="0">Some text goes here</div></label>
<label><div class="someClass"><input type="checkbox" name="ChkBox[]" value="1">Some text goes here</div></label>
<label><div class="someClass"><input type="checkbox" name="ChkBox[]" value="2">Some text goes here</div></label>

我的目的是使用div和css创建容器样式，因此当用户单击容器上的任何位置时，将自动检查相应的框。如果没有大量的javascript或jquery，有没有更好的方法呢？请记住，复选框的数量会有所不同。

Answer 1

您可以使用for元素上的<label>属性来说明标签的复选框。这样，当用户点击标签时，复选框将切换：

<input type="checkbox" name="ChkBox[]" id="first" value="0"><label for="first" class="someClass">Some text goes here</label>
<input type="checkbox" name="ChkBox[]" id="second" value="0"><label for="second" class="someClass">Some text goes here</label>
<input type="checkbox" name="ChkBox[]" id="third" value="0"><label for="third" class="someClass">Some text goes here</label>

Answer 2

为标签

设置display:block

label {
  display:block;
}

<label><input type="checkbox" name="ChkBox[]" value="0">Some text goes here</label>
<label><input type="checkbox" name="ChkBox[]" value="1">Some text goes here</label>
<label><input type="checkbox" name="ChkBox[]" value="2">Some text goes here</label>

Answer 3

使用@zzzzBov评论加入@satJ回答，我会这样做：

<input type="checkbox" name="ChkBox[]" id="first" value="0"><label for="first"><span class="someClass">Some text goes here</span></label>
<input type="checkbox" name="ChkBox[]" id="second" value="0"><label for="second"><span class="someClass">Some text goes here</span></label>
<input type="checkbox" name="ChkBox[]" id="third" value="0"><label for="third"><span class="someClass">Some text goes here</span></label>

html5 div里面的标签

3 个答案: