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 메서드를 통해 수행할 수 있다.!