예제 9-17. 선택된 라디오버튼 알아내기. 예제 9-18. 체크박스로 선택한 물품 계산

WEB/JAVASCRIPT-CONCEPT 2017. 11. 2. 15:34 |

* 라디오버튼과 체크박스


* 라디오버튼 객체

name 속성이 동일한 radio 객체들이 하나의 그룹을 이루기 때문에 name 속성 값으로 radio 객체를 찾아야한다.


getElementByName()는 HTML 태그의 name 속성 값이 일치하는 HTML 태그를 모두 찾아 컬렉션을 만들어 리턴하는 메소드

kcity[0], kcity[1], kcity[2]는 3개의 radio 객체들을 나타낸다.



* 선택된 라디오버튼 알아내기

    var found = null;
    var kcity = document.getElementsByName("city"); // DOM 트리에서 앞의 3개의 radio 객체들을 알아내는 자바스크립트 코드
    for(var i=0; i<kcity.length; i++) {
        if(kcity[i].checked == true)
            found = kcity[i];
    }
    if(found != null)
        alert(found.value + "이 선택되었음");
    else
        alert("선택된 것이 없음");
}


예제 9-17. 선택된 라디오버튼 알아내기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>선택된 라디오버튼 알아내기</title>
<script>
function findChecked() {
    var found = null;
    var kcity = document.getElementsByName("city"); // DOM 트리에서 앞의 3개의 radio 객체들을 알아내는 자바스크립트 코드
    for(var i=0; i<kcity.length; i++) {
        if(kcity[i].checked == true)
            found = kcity[i];
    }
    if(found != null)
        alert(found.value + "이 선택되었음");
    else
        alert("선택된 것이 없음");
}
</script>
</head>
<body>
<h3>버튼을 클릭하면 선택된 라디오 버튼의 value를 출력합니다.</h3>
<hr>
<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>
</body>
</html>
 
cs


* 체크박스 객체

checkbox 객체는 <input type="checkbox">로 만들어진 체크박스를 나타내는 DOM 객체이다.

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


예제 9-18. 체크박스로 선택한 물품 계산

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>선택된 물품 계산하기</title>
<script>
var sum=0;
function calc(cBox) {
var sumtext = document.getElementById("sumtext"); // 이런것들 무조건 function안에 쓰기.
 
    if(cBox.checked)
        sum += parseInt(cBox.value);
    else
        sum -= parseInt(cBox.value);
    sumtext.value = sum;
    //document.getElementById("sumtext").value = sum;
}
</script>
</head>
<body>
<h3>물품을 선택하면 금액이 자동 계산됩니다</h3>
<hr>
<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>
</body>
</html>
cs



저작자표시 비영리 동일조건

'WEB > JAVASCRIPT-CONCEPT' 카테고리의 다른 글

예제 9-20. 키 이벤트 리스너  (0) 2017.11.02
예제 9-19. select 객체에서 선택한 과일 출력  (0) 2017.11.02
예제 9-16. onfocus와 onblur, 이름을 입력하지 않고 다른 창으로 갈 수 없음.  (0) 2017.11.02
예제 9-15. 이미지 갤러리 만들기 : new Image()로 이미지 로딩  (0) 2017.11.02
예제 9-14. onload로 이미지 크기 알아내기  (0) 2017.11.02
Posted by 너래쟁이
:

티스토리툴바