JavaScript 옵션 선택에 따라서 상품 가격 변경하기
페이지 정보
본문
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<style type="text/css">
body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {font-family: "Nanum Gothic",Arial,Helvetica,Sans-Serif;}
div.title {cursor:pointer}
</style>
</head>
<body>
<div class="row" style="width:1000px;margin:100px auto 0">
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">상품 가격 DISPLAY</label>
<div class="col-sm-10">
<span id="total_price_display">6,000</span>원
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">상품 가격</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="price" id="price" value="6000" readonly>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">상품 가격(옵션 포함)</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="total_price" id="total_price" value="6000" readonly>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">추가 옵션</label>
<div class="col-sm-10">
<div class="checkbox"><label><input type="checkbox" name="aa" value="3000" class="option-item"> aa : -3,000원</label></div>
<div class="checkbox"><label><input type="checkbox" name="bb" value="4000" class="option-item"> bb : -4,000원</label></div>
<div class="checkbox"><label><input type="checkbox" name="cc" value="5000" class="option-item"> cc : -5,000원</label></div>
</div>
</div>
</form>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript">
function comma(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
// 금액 계산
function sumPrice() {
var aaCount = $("input[name='aa']:checked").size();
var bbCount = $("input[name='bb']:checked").size();
var ccCount = $("input[name='cc']:checked").size();
var price = $('#price').val();
var aaPrice = aaCount > 0 ? $("input[name='aa']").val() : 0;
var bbPrice = bbCount > 0 ? $("input[name='bb']").val() : 0;
var ccPrice = ccCount > 0 ? $("input[name='cc']").val() : 0;
var totalPrice = price - aaPrice - bbPrice - ccPrice;
totalPrice = totalPrice > 0 ? totalPrice : 0;
$('#total_price').val(totalPrice);
$('#total_price_display').text(comma(totalPrice));
$('total_price').val(totalPrice);
}
$(function() {
// 옵션 아이템 클릭
$('.option-item').click(function() {
var aaCount = $("input[name='aa']:checked").size();
var bbCount = $("input[name='bb']:checked").size();
var ccCount = $("input[name='cc']:checked").size();
if (aaCount > 0 && bbCount > 0) {
alert('aa, bb 상품은 동시에 선택하실 수 없습니다.');
return false;
}
sumPrice();
});
});
</script>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<style type="text/css">
body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {font-family: "Nanum Gothic",Arial,Helvetica,Sans-Serif;}
div.title {cursor:pointer}
</style>
</head>
<body>
<div class="row" style="width:1000px;margin:100px auto 0">
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">상품 가격 DISPLAY</label>
<div class="col-sm-10">
<span id="total_price_display">6,000</span>원
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">상품 가격</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="price" id="price" value="6000" readonly>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">상품 가격(옵션 포함)</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="total_price" id="total_price" value="6000" readonly>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">추가 옵션</label>
<div class="col-sm-10">
<div class="checkbox"><label><input type="checkbox" name="aa" value="3000" class="option-item"> aa : -3,000원</label></div>
<div class="checkbox"><label><input type="checkbox" name="bb" value="4000" class="option-item"> bb : -4,000원</label></div>
<div class="checkbox"><label><input type="checkbox" name="cc" value="5000" class="option-item"> cc : -5,000원</label></div>
</div>
</div>
</form>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript">
function comma(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
// 금액 계산
function sumPrice() {
var aaCount = $("input[name='aa']:checked").size();
var bbCount = $("input[name='bb']:checked").size();
var ccCount = $("input[name='cc']:checked").size();
var price = $('#price').val();
var aaPrice = aaCount > 0 ? $("input[name='aa']").val() : 0;
var bbPrice = bbCount > 0 ? $("input[name='bb']").val() : 0;
var ccPrice = ccCount > 0 ? $("input[name='cc']").val() : 0;
var totalPrice = price - aaPrice - bbPrice - ccPrice;
totalPrice = totalPrice > 0 ? totalPrice : 0;
$('#total_price').val(totalPrice);
$('#total_price_display').text(comma(totalPrice));
$('total_price').val(totalPrice);
}
$(function() {
// 옵션 아이템 클릭
$('.option-item').click(function() {
var aaCount = $("input[name='aa']:checked").size();
var bbCount = $("input[name='bb']:checked").size();
var ccCount = $("input[name='cc']:checked").size();
if (aaCount > 0 && bbCount > 0) {
alert('aa, bb 상품은 동시에 선택하실 수 없습니다.');
return false;
}
sumPrice();
});
});
</script>
</body>
</html>
댓글목록
등록된 댓글이 없습니다.