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

希望幫助！