<input type="checkbox">

<input> 태그의 type="checkbox"는 체크박스를 나타냅니다.

단일한 값으로 체크와 취소를 번갈아가며 할 수 있는 커트롤입니다.
일반적으로 정사각형이지만 모서리가 둥글게 되어 있을 수도 있습니다.

HTML 
<label for="opt-in">이메일 수신 동의</label>
<input type="checkbox" id="opt-in">
브라우저에서 실제 표시된 모습

<input type="checkbox">의 암시적인 role 속성의 값은 checkbox입니다.

관련 속성 사용하기

<input type="checkbox">와 관련된 속성에 대해 알아보겠습니다.

checked 속성

체크박스가 기본적으로 체크되어 있는지 여부를 나타내는 속성입니다. 페이지가 처음 로드될 때 체크박스가 체크된 상태로 시작하려면 checked 속성을 사용합니다. 하지만 페이지가 로드된 후 사용자가 체크박스를 체크하거나 체크 해제해도 checked 속성은 변하지 않습니다.

이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

HTML 
<input type="checkbox" checked>
브라우저에서 실제 표시된 모습

disabled 속성

체크박스를 비활성시키려면 disabled 속성을 사용하세요.
이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

HTML 
<input type="checkbox" disabled>
브라우저에서 실제 표시된 모습

이 밖에도 사용할 수 있는 관련 속성들이 다양하게 있습니다.
HTML <input> 태그의 여러 가지 속성들을 참조하세요!

여러 개의 체크박스 사용하기

위에서 본 코드 예제들은 하나의 체크박스에 관련된 것입니다. 실제로 여러 개의 체크박스를 처리하는 코드를 살펴보겠습니다.

다음의 예제에는 사용자가 관심이 있는 웹 개발 언어를 선택할 수 있도록 여러 개의 체크박스가 있습니다. 예제처럼 <fieldset> 태그로 체크박스를 그룹화하면 됩니다.

HTML 
<fieldset>
    <legend>관심이 있는 웹 개발 언어를 선택하세요.</legend>
    <div>
       <input type="checkbox" id="html">
       <label for="html">HTML</label>
    </div>
    <div>
       <input type="checkbox" id="css">
       <label for="css">CSS</label>
    </div>
    <div>
       <input type="checkbox" id="js">
       <label for="js">JavaScript</label>
    </div>
</fieldset>
HTML <legend> 태그
브라우저에서 실제 표시된 모습

라디오 버튼과의 차이점

라디오 버튼은 체크박스와 유사하지만 중요한 차이점이 있습니다.

라디오 버튼은 <input type="radio">로 나타냅니다.

단일한 컨트롤에 체크와 체크 해제

체크박스와 라디오 버튼의 차이점
체크박스 단일한 체크박스에 번갈아가며 체크와 체크 해제를 할 수 있습니다.
라디오 버튼 단일한 라디오 버튼에 번갈아가며 체크와 체크 해제를 할 수 없습니다.
HTML 
<input type="checkbox">
<input type="radio">
브라우저에서 실제 표시된 모습 다음의 예제로 실습해 보세요.

그룹화된 여러개의 컨트롤로 체크하기

그룹화된 여러 개의 체크박스를 사용할 경우 사용자는 각각의 체크 박스를 복수로 선택할 수 있는 반면에 라디오 버튼은 전체 중에서 하나만 선택이 가능해야 합니다.

이렇게 구현하려면 그룹화된 체크박스나 라디오 버튼에는 모든 동일한 name 속성과 값을 지정해야 하지만, value 속성의 값은 각각 지정합니다.

name 속성은 컨트롤의 이름을 나타냅니다. 양식이 제출될 때 이 이름이 컨트롤을 식별하는데 사용됩니다.

HTML 
<fieldset>
    <legend>관심이 있는 웹 개발 언어를 선택하세요.</legend>
    <div>
       <input type="checkbox" id="html" name="interest" value="html">
       <label for="html">HTML</label>
    </div>
    <div>
       <input type="checkbox" id="css" name="interest" value="interest">
       <label for="css">CSS</label>
    </div>
    <div>
       <input type="checkbox" id="js" name="interest" value="interest">
       <label for="js">JavaScript</label>
    </div>
</fieldset>
그룹화된 체크 박스는 복수로 선택할 수 있습니다.
HTML 
<fieldset>
    <legend>관심이 있는 웹 개발 언어를 선택하세요.</legend>
    <div>
       <input type="radio" id="html" name="interest" value="html">
       <label for="html">HTML</label>
    </div>
    <div>
       <input type="radio" id="css" name="interest" value="interest">
       <label for="css">CSS</label>
    </div>
    <div>
       <input type="radio" id="js" name="interest" value="interest">
       <label for="js">JavaScript</label>
    </div>
</fieldset>
그룹화된 라디오 버튼는 전체 중에서 하나만 선택할 수 있습니다.

접근성 고려사항

<input type="checkbox">를 사용할 때에는 <label>을 함께 사용해야 합니다.
자세한 사항은 <input> 태그의 접근성 고려사항을 참조하세요.

브라우저 호환성

input type 속성의 checkbox 값에 대한 브라우저 호환성과 관련 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<input type="checkbox"> 1 12 1 1
checked 1 12 1 1
disabled 1 12 1 1
name 1 12 1 1

명세서

input type 속성의 checkbox 값에 대한 명세서 사양
명세서 사양
<input type="checkbox"> HTML Standard
#checkbox-state-(type=checkbox)

참고문헌

같이 보기