웹개발/jQuery
[jQuery] 처음배우는 Javascript_jQuery, 체크 박스
hatch
2021. 12. 13. 10:06
728x90
반응형
자바스크립트 코드로 작성했던 것을 JQuery 문법으로 바꿔보았다.
참고글: [예제 9-18, 체크박스] https://yy-eun.tistory.com/47
[명품 웹 프로그래밍] 9장 예제 9-18, 체크박스로 선택 물품 계산
실행 화면 2개 선택 2개 선택에서 체크 해제했을 때 <자바스크립트 코드> <!DOCTYPE html> x 선택된 라디오 버튼 알아내기 모자 1만원 구두 3만원 명품가방 8만원 지불하실 금액
yy-eun.tistory.com
1. JQuery 코드
- 문제 : 결과값이 순간 보이고 다시 초기화됨. (추측) each문 때문에 그런 것 같음.
<!DOCTYPE html>
<html><head><meta charset="UTF-8">
<title>라디오</title>
<script src="http://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<form>
<input type="checkbox" name="items" value="10000">모자 1만원
<input type="checkbox" name="items" value="30000">구두 3만원
<input type="checkbox" name="items" value="80000">명품가방 8만원 <br>
<button id="btn">계산</button><br>
지불하실 금액 <input type="text" id="price">
</form>
<script>
$(document).ready(function(){
$("#btn").click(function(){
var sum = 0;
$("input:checkbox[name='items']").each(function(){
if(this.checked) sum += parseInt(this.value);
});
$("#price").val(sum);
});
});
</script>
</body>
</html>