getElementsByName 체크박스 라디오버튼 컨트롤 하기

getElementsByName 은 docuemnt 의 name 에 접근할 수 있는 method 입니다.

 

사용방법

var elements = document.getElementsByName(name);

elements 은 nodeList 객체의 collection 입니다.

 

라디오버튼 (radio button) 예제입니다.

<input type="radio" name="colors" id="radio1" value="green"><label for="radio1">그린</label>
<input type="radio" name="colors" id="radio2" value="blue" checked><label for="radio2">블루</label>
<input type="radio" name="colors" id="radio3" value="red"><label for="radio3">레드</label>
<input type="radio" name="colors" id="radio4" value="black"><label for="radio4">블랙</label>

4개의 colors 라는 name 을 갖는 라디오버튼이 있습니다.

var ele = document.getElementsByName('colors'); // colors 이름을 가지는 엘리먼트를 가져온다.
var count = ele.length; // 라디오버튼 길이
console.log('라디오버튼 갯수 ', count); // "라디오버튼 갯수 ", 4 출력

이제 colors 의 모든 값들을 조회해 보겠습니다.

for(var i=0; i < ele.length; i++) {
	console.log(ele[i].value); //green, blue, red, black 을 순서대로 출력한다.
}

ele 0번부터 ele.length 길이 만큼 for loop 를 돌면서 각 해당 엘리먼트의 value 를 출력하고 있습니다.

 

다음으로 라디오버튼의 체크된 값만 가져오도록 하겠습니다.

for(var i=0; i < ele.length; i++) {
	if(ele[i].checked === true) { // checked 속성이 true 와 같은지 비교합니다.
  	console.log(ele[i].value); //blue 만 출력합니다.
  }
}

 

colors 의 모든 checked 속성을 해제해주는 코드 입니다.

// colors 이름을 가지고 있는 라디오 버튼의 체크 속성이 해제된다.
for(var i=0; i < ele.length; i++) {
	ele[i].checked = false; // checked 속성에 false 값을 대입하면 체크된 라디오 버튼이 해제된다  
}

다음으로 체크박스(checkbox) 예제입니다.

 

<input type="checkbox" name="colors" id="chk1" value="green"><label for="radio1">그린</label>
<input type="checkbox" name="colors" id="chk2" value="blue" checked><label for="radio2">블루</label>
<input type="checkbox" name="colors" id="chk3" value="red"><label for="radio3">레드</label>
<input type="checkbox" name="colors" id="chk4" value="black"><label for="radio4">블랙</label>

 

colors 체크박스 갯수를 구해보겠습니다.

var ele = document.getElementsByName('colors'); // colors 이름을 가지는 엘리먼트를 가져온다.
var count = ele.length; // 체크박스 갯수
console.log('체크박스 갯수 ', count); // "체크박스 갯수 ", 4 출력

위에 코드를 보면 colors name 을 갖는 체크박스 총 갯수를 가져옵니다.

 

이제 체크박스의 값을 전부 가져오는 코드 입니다.

for(var i=0; i < ele.length; i++) {
	console.log(ele[i].value); //green, blue, red, black 을 순서대로 출력한다.
}

위에 코드를 보면 for loop 를 돌면서 각 엘리먼트의 value 값을 출력 하고 있습니다.

 

다음은 체크된 체크박스의 값만 가져오는 코드 입니다.

for(var i=0; i < ele.length; i++) {
	if(ele[i].checked === true) { // checked 속성이 true 와 같은지 비교합니다.
  	console.log(ele[i].value); //blue 만 출력합니다.
  }
}

각 엘리먼트의 checked 속성이 true 값인지 for loop 를 돌면서 비교를 합니다. 비교후 체크 되어 있는 체크박스의 값을 가져옵니다.

 

모든 체크박스를 체크 시키는 코드 입니다.

// colors 이름을 가지고 있는 체크박스의 checked 값에 true 를 대입하면 모든 체크박스는
// 체크 됩니다.
for(var i=0; i < ele.length; i++) {
	ele[i].checked = true; 
}

 

모든 체크박스의 체크를 해제 시키는 코드 입니다.

// 각 체크박스 엘리먼트 checked 값에 false 값을 대입하면 모든 체크박스의 체크가 해제됩니다.
for(var i=0; i < ele.length; i++) {
	ele[i].checked = false; // checked 속성에 false 값을 대입하면 체크된 라디오 버튼이 해제된다  
}

 

오늘은 getElementsByName 를 가지고 라디오버튼과 체크박스를 컨트롤 하는것을 알아봤습니다.