HTML DOM 입력 체크박스 name 속성 완벽 정리

HTML DOM에서 Input Checkbox의 name 속성은 해당 체크박스 요소의 name 속성 값을 문자열 형태로 반환합니다. 뿐만 아니라, 개발자가 이 속성에 새로운 문자열 값을 할당하여 동적으로 변경하는 것도 가능합니다.

구문 (Syntax)

name 속성의 기본 구문은 다음과 같습니다.

1. 문자열 값 반환하기

inputCheckboxObject.name

2. name 속성에 새로운 문자열 값 설정하기

inputCheckboxObject.name = 'String'

예제 (Example)

아래 예제를 통해 Input Checkbox의 name 속성이 실제로 어떻게 동작하는지 확인해 보겠습니다. 체크박스를 선택한 상태에서 버튼을 클릭하면 name 속성 값이 변경되고, 선택하지 않은 상태라면 현재 name 속성 값을 그대로 보여줍니다.

<!DOCTYPE html>
<html>
<head>
<title>체크박스의 Name 속성</title>
</head>
<body>
<form id="Form">
<div>
새 이름 활성화: <input id="formID" type="checkbox" name="formID">
</div>
</form>
<button onclick="getFormID()">Name 속성 변경</button>
<div id="nameAttr"></div>
<script>
    function getFormID(){
        var oldNameAttr = document.getElementById("formID");
        var newNameAttr = document.getElementById("nameAttr");
        if(oldNameAttr.checked == true){
            oldNameAttr.name = 'newFormID';
            newNameAttr.textContent = '변경된 name 속성 값: '+oldNameAttr.name;
        } else {
            newNameAttr.textContent = '체크박스를 먼저 선택하세요'+ ', 현재 name 속성 값: '+oldNameAttr.name ;
        }
    }
</script>
</body>
</html>

실행 결과 (Output)

위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.

'새 이름 활성화' 체크박스를 선택하기 전 −

HTML DOM 입력 체크박스 name 속성 완벽 정리

'새 이름 활성화' 체크박스를 선택한 후 −

HTML DOM 입력 체크박스 name 속성 완벽 정리

체크박스가 선택된 상태에서 버튼을 클릭하면 name 속성이 formID에서 newFormID로 성공적으로 변경되는 것을 확인할 수 있습니다. 이처럼 name 속성은 폼 데이터 제출 시 서버로 전달되는 필드 이름을 결정하므로, 자바스크립트를 통해 동적으로 조작하면 다양한 폼 처리 로직을 구현할 때 유용하게 활용됩니다.