[attribute] HTML - checked 속성 ★ - 미리 (체크박스/라디오) 체크 여부 지정 (= checked속성 = 체크트속성)

1. checked 예제 - <input type="checkbox"> 경우
2. checked 정의
3. checked 구문
4. checked 예제 - <input type="radio"> 경우
5. checked 예제 - 페이지 로드 완료 후, JS로 체크 적용

checked 예제 - <input type="checkbox"> 경우

 

<form action="/action_page.php" method="get">

  <input type="checkbox" name="html" value="html">

  <label for="html"> HTML</label><br>

  <input type="checkbox" name="css" value="css">

  <label for="css"> CSS</label><br>

  <input type="checkbox" name="js" value="js" checked>

  <label for="js"> JS</label><br><br>

  <input type="submit" value="확인">

</form>

 

결과보기

checked 정의

 

페이지 로드 시, (체크박스/라디오)가 미리 선택되어 있어야 하는지 지정하는 참거짓 속성.

 

---

 

1. checked 속성 사용 가능 태그

<input type="checkbox">, <input type="radio">

 

2.

JS 이용해, 페이지 로드 완료 후 지정도 가능.

 

3.

모든 브라우저 지원.

 

checked 구문

 

• <input type="checkbox" checked>
• <input type="radio" checked>

 

---

[속성값]

 

없음.

 

checked 예제 - <input type="radio"> 경우

 

<form action="/action_page.php" method="get">

  <input type="radio" id="html" name="html" value="html">

  <label for="html"> HTML</label><br>

  <input type="radio" id="css" name="css" value="css">

  <label for="css"> CSS</label><br>

  <input type="radio" id="js" name="js" value="js" checked>

  <label for="js"> JS</label><br><br>

  <input type="submit" value="확인">

</form>

 

결과보기

checked 예제 - 페이지 로드 완료 후, JS로 체크 적용

 

<form action="/action_page.php" method="get">

  <input type="radio" id="html" name="html" value="html">

  <label for="html"> HTML</label><br>

  <input type="radio" id="css" name="css" value="css">

  <label for="css"> CSS</label><br>

  <input type="radio" id="js" name="js" value="js">

  <label for="js"> JS</label><br><br>

  <input type="submit" value="확인">

</form>

<script>

window.addEventListener('DOMContentLoaded', function() {

    document.getElementById('js').checked = true;

});

</script>

 

결과보기