[JavaScript] 폼과 이벤트 활용 : 라디오버튼과 체크박스

라디오버튼 객체

• name : 태그의 name 프로퍼티가 동일한 radio 객체들이 하나의 그룹을 이루기 때문에 name 속성 값으로 radio 객체를 찾아야 한다. (ex) document.getElementsByName("city") 해당 메소드를 이용하면 name 속성 값이 일치하는 HTML 태그를 모두 찾아 컬렉션을 만들어 리턴한다. 
• checked : 선택 상태인 라디오 버튼을 알아낼 수 있다.

function findChecked() {
	var found = null;
	var kcity = document.getElementsByName("city");
	for(var i=0; i<kcity.length; i++) {
		if(kcity[i].checked == true)
			found = kcity[i];
	}
	if(found != null)
		alert(found.value + "이 선택되었음");
	else
		alert("선택된 것이 없음");
}

<form>
	<input type="radio" name="city" value="seoul" checked>서울
	<input type="radio" name="city" value="busan">부산
	<input type="radio" name="city" value="chunchen">춘천
	<input type="button" value="find checked" onclick="findChecked()">
</form>

 

 

체크박스 객체

radio 객체들과는 달리 그룹을 형성하지 않기 때문에 name 프로퍼티가 모두 다르다.

var sum=0;
function calc(cBox) {
	if(cBox.checked)
		sum += parseInt(cBox.value);
	else
		sum -= parseInt(cBox.value);
	document.getElementById("sumtext").value = sum;
}

<form>
	<input type="checkbox" name="hap" value="10000" onclick="calc(this)"> 모자 1만원
	<input type="checkbox" name="shose" value="30000" onclick="calc(this)"> 구두 3만원
	<input type="checkbox" name="bag" value="80000" onclick="calc(this)"> 명품가방 8만원
    <br>
	지불하실 금액 <input type="text" id="sumtext" value="0" >
</form>

 

 

 

<참고 교재>

http://webprogramming.co.kr/

명품 웹 프로그래밍