在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> 

它应该是这样的：

选择Foler | （hw1）（hw2）.....

和hw复选框应该是可点击的，我需要能够选择多个。

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>

注：您可能还需要添加for=属性为老马车IE浏览器。

这是你的最终代码（我加了CSS属性cursor:pointer;到<label> S）：

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>

希望帮助！