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

注意:您可能仍需要添加 for=旧的和有问题的 IE 浏览器的属性。

这是您的最终代码(我将 CSS 属性 cursor:pointer; 添加到 <label> 中):

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>

希望对您有所帮助!