在html中创建6个复选框

Question

如何创建6个如下所示的复选框？我知道如何隐藏复选框，但我如何才能使其成为可以单击文本的复选框？

<tr>
<td class = "first">Select Folder(s)</td>
<td class = "second">
<input id="hw" type="checkbox">hw1
  <input id="hw" type="checkbox">hw2
     <input id="hw" type="checkbox">hw3
        <input id="hw" type="checkbox">hw4
           <input id="hw" type="checkbox">hw5
              <input id="hw" type="checkbox">hw6
</td>

应该是这样的：

选择文件夹| (hw1) (hw2) .....

硬件复选框应该是可点击的，并且我需要能够选择多个。

Answer 1

我认为您需要<label> HTML标记。指定<label，然后指定for="，然后指定要将其附加到的元素的id (单选按钮或复选框)。最后，它应该看起来像这样：

<label for="hw">text that they can click on goes here</label>

正如@tieTYT在注释中所述，另一种方法是将<label>标记包装在单选或复选框元素周围，如下所示：

<label><input type="radio"/>Text for the label here</label>

注意:对于旧的和有错误的IE浏览器，您可能仍然需要添加for=属性。

以下是您的最终代码(我在<label>s中添加了CSS属性cursor:pointer; )：

​

label {
  cursor: pointer;
}
input[type=checkbox] {
  cursor: pointer;
}

<tr>
  <td class="first">Select Folder(s)</td>
  <td class="second">
    <input id="hw" type="checkbox">
    <label for="hw">hw1</label>
    <input id="hw2" type="checkbox">
    <label for="hw2">hw2</label>
    <input id="hw3" type="checkbox">
    <label for="hw3">hw3</label>
    <input id="hw4" type="checkbox">
    <label for="hw4">hw4</label>
    <input id="hw5" type="checkbox">
    <label for="hw5">hw5</label>
    <input id="hw6" type="checkbox">
    <label for="hw6">hw6</label>
  </td>

​

希望这能有所帮助！