• 회원가입
  • 로그인
  • 구글아이디로 로그인

[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>

 

결과보기


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
게시물이 없습니다.
22/18
목록
찾아주셔서 감사합니다. Since 2012