HTML DOM 입력 체크박스 객체

<시간/>

HTML DOM 입력 확인란 개체는 확인란 유형이 있는 입력 HTML 요소를 나타냅니다.

구문

다음은 구문입니다 -

<입력> 생성 유형 체크박스 포함

var checkboxObject = document.createElement(“input”);
checkboxObject.type = “checkbox”;

속성

여기에서 "checkboxObject "는 다음과 같은 속성을 가질 수 있습니다. -

속성	설명
자동 초점	체크박스가 초기 페이지 로드에 초점을 맞춰야 하는지 정의합니다.
확인됨	체크박스의 상태를 정의합니다. 즉, 선택/선택 해제입니다.
defaultChecked	확인된 속성의 기본값, 즉 true/false를 반환합니다.
기본값	체크박스의 기본값을 설정/반환합니다.
비활성화됨	체크박스의 비활성화/활성화 여부를 정의합니다.
양식	확인란을 포함하는 둘러싸는 양식의 참조를 반환합니다.
미정	확인란의 불확실한 상태를 설정/반환합니다.
이름	확인란의 이름 속성 값을 정의합니다.
필수	양식을 제출하기 위해 확인란을 필수로 선택해야 하는지 정의합니다.
유형	확인란의 양식 요소 유형을 반환합니다.
값	확인란의 값 속성 값을 정의합니다.

예시

입력 체크박스 값의 예를 살펴보겠습니다. 속성 -

<!DOCTYPE html>
<html>
<head>
<title>Value Attribute of Checkbox</title>
</head>
<body>
<form id="Form">
<div>
Color-Red: <input value="Green" id="formCheckbox" type="checkbox" name="formCheckbox">
</div>
</form>
<button onclick="changeType()">Change value of input checkbox</button>
<div id="displayDiv"></div>
<script>
   var valueOfInput = document.getElementById("formCheckbox");
   var displayDiv = document.getElementById("displayDiv");
   displayDiv.textContent = 'Value: ' + valueOfInput.value;
   function changeType(){
      if(valueOfInput.value == 'Green' && valueOfInput.checked == true){
         valueOfInput.value = 'Red' displayDiv.textContent = 'value: ' + valueOfInput.value;
      } else {
         displayDiv.textContent = 'Check the checkbox to change value to red';
      }
   }
</script>
</body>
</html>

출력

이것은 다음과 같은 출력을 생성합니다 -

'입력 체크박스 값 변경'을 클릭하기 전에 버튼 -

HTML DOM 입력 체크박스 객체

'입력 체크박스 값 변경'을 클릭한 후 버튼 -

HTML DOM 입력 체크박스 객체

'색상-빨간색'을 선택했습니다. 확인란 및 '입력 확인란의 값 변경' 클릭 버튼 -

HTML DOM 입력 체크박스 객체