Input 란의 텍스트 모두 없애기

위와 같은 형식의 웹페이지를 본 적이 있을 것이다.

입력값들을 넣은 이후 내용 지우기를 누르면 모든 내용이 한번에 지워지는 것이다

위에 있는 텍스트박스들의 글을 지우는 법과

밑에 있는 체크박스(라디오박스)를 지우는 법을 알아보자

텍스트박스와 라디오박스는 다음과 같이 선언돼있다.

<input class= "input-text" type="text">

<input class= "input-text" type="text">

<label class= "input-label"><input class= "input-radio" type="radio" >1순위</label>

<label class= "input-label"><input class= "input-radio" type="radio" >2순위</label>

<label class= "input-label"><input class= "input-radio" type="radio" >3순위</label>

1. 텍스트박스 글 지우기

우선 '내용 지우기'라는 버튼을 button 태그로 다음과 같이 감싼다

<button class = "erase" onclick="clearInput()">내용 지우기</button>

claerInput() 함수는 우리가 자바스크립트로 구현할 함수이다.

function clearInput(){

/* 텍스트박스 지우는 부분 */

var el = document.getElementsByClassName('input-text');

for(var i=0; i<el.length; i++){

el[i].value = '';

}

/* 체크(라디오)박스 지우는 부분 */

var el = document.getElementsByClassName('input-radio');

for(var i=0; i<el.length; i++){

el[i].checked = false;

}

}

위와 같이 클래스네임으로 엘리먼트들을 찾아 각각 value, checked 메서드를 통해 수행할 수 있다.!