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 (라디오 또는 확인란)을 지정합니다. 결국,이 모양은 다음과 같습니다

코멘트에 @tieTYT에서 언급 한 바와 같이 <label for="hw">text that they can click on goes here</label>

, 될이 작업을 수행하는 다른 방법은 다음과 같이 라디오 나 체크 박스 요소 주위의 <label> 태그를 포장하는 :

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

참고 : 당신은 여전히 ​​과거와 버그 IE 브라우저 용 for= 속성을 추가해야 할 수도 있습니다.

여기에 최종 코드의은 (나는 <label>의에 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>

을 희망이 도움이!