HTML <input> checked 속성 – 체크박스와 라디오 버튼에 미리 체크하기

정의 및 사용 방법

checked 속성은
체크박스(<input type="checkbox">)나 라디오 버튼(<input type="radio">)이 기본적으로 체크된 상태로 보여질 것인지를 지정하는 속성입니다.

특징

checked는 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다. 속성만 작성하면 해당 요소가 기본적으로 체크된 상태로 보여지도록 지정합니다.
이 속성은 (페이지나 해당 요소가 로드될 때) 기본적으로 체크된 상태(default checkedness)로 보여질 것인지를 지정할 뿐 해당 요소가 현재 체크되어 있는지 여부를 나타내지는 않습니다.
사용자나 스크립트로 해당 요소의 체크 상태를 변경하더라도 이 속성은 변경을 반영하지 않습니다.

기본 예제

HTML

<fieldset>
    <legend>관심 있는 웹 개발 언어</legend>
    <div>
        <input id="html" type="checkbox" checked> <!-- 기본적으로 체크된 상태로 보여줍니다. -->
        <label for="html">HTML</label>
    </div>
    <div>
        <input id="css" type="checkbox">
        <label for="css">CSS</label>
    </div>
</fieldset>

<fieldset>
    <legend>좋아하는 색상</legend>
    <div>
        <input id="red" type="radio" name="color" checked> <!-- 기본적으로 체크된 상태로 보여줍니다. -->
        <label for="red">Red</label>
    </div>
    <div>
        <input id="blue" type="radio" name="color">
        <label for="blue">Blue</label>
    </div>
</fieldset>

라디오 버튼 그룹에서 `checked` 속성 사용 - 주의 사항 -

동일한 name을 공유하는 라디오 버튼 그룹에서는 한 번에 하나의 버튼만 선택할 수 있으며, checked 속성은 기본 체크 상태를 지정하는 데 사용됩니다. 이때 라디오 버튼 그룹에 속한 여러 개의 버튼에 checked 속성이 존재하면 오류가 발생할 수 있습니다. 또한 브라우저마다 다르게 동작할 수 있습니다.

따라서, 동일한 name을 공유하는 라디오 버튼 그룹에서는 필요할 경우 오직 하나의 라디오 버튼에만 checked 속성을 사용하세요.

HTML - 올바르지 않은 예

<!-- 동일한 name 그룹에 checked를 두 개 지정 (권장하지 않음) -->
<input type="radio" name="color" value="red" checked>
<input type="radio" name="color" value="blue" checked>

브라우저 호환성

Chrome

Edge

명세서

checked 속성의 명세서 사양
명세서 사양
`checked`	HTML Standard #attr-input-checked

참고문헌

같이 보기