HTML/CSS
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>자동차 견적</title>
<style>
* {text-align: center;}
table, th, tr, td {
border: 1px solid black;
border-collapse: collapse;
}
th, #totalTxt {
background-color: lightgray;
}
</style>
</head>
<body>
<div id="carZone">
<h1>자동차 견적</h1>
<p><img src="images/car1.jpg" alt="자동차이미지"></p>
<table id="car">
<colgroup>
<col width="50%">
<col width="30%">
</colgroup>
<thead>
<tr>
<th>옵션</th>
<th>추가가격</th>
<th>옵션선택</th>
</tr>
</thead>
<tbody>
<tr>
<td>인조가죽시트</td>
<td>300000</td>
<td>
<input type="checkbox" value="300000" id="opt1" class="opt" name="opt1">
</td>
</tr>
<tr>
<td>네비게이션</td>
<td>400000</td>
<td>
<input type="checkbox" value="400000" id="opt2" class="opt" name="opt2">
</td>
</tr>
<tr>
<td>썬루프</td>
<td>500000</td>
<td>
<input type="checkbox" value="500000" id="opt3" class="opt" name="opt3">
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td id="totalTxt">차량금액(옵션포함)</td>
<td colspan="2">
<input type="text" value="20000000" id="total" name="total" readonly>
</td>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
JS 개별처리 방식
<script>
window.onload = function(){
let total = parseInt(document.getElementById("total").value);
let opt = document.getElementsByClassName("opt");
let opt1 = document.getElementById("opt1");
let opt2 = document.getElementById("opt2");
let opt3 = document.getElementById("opt3");
opt1.onchange = function(){
changeTotal(opt1);
};
opt2.onchange = function(){
changeTotal(opt2);
};
opt3.onchange = function(){
changeTotal(opt3);
};
function changeTotal(chk){
if(chk.checked){
total += parseInt(chk.value);
} else {
total -= parseInt(chk.value);
}
document.getElementById("total").value = total;
};
};
</script>
jQuery 개별처리 방식
<script>
$(document).ready(function(){
let total = parseInt($("#total").val());
let opt1 = $("#opt1");
let opt2 = $("#opt2");
let opt3 = $("#opt3");
function changeTotal(chk){
if(chk.is(':checked')){
total += parseInt(chk.val());
} else {
total -= parseInt(chk.val());
}
$("#total").val(total);
}
opt1.click(function(){
changeTotal(opt1);
});
opt2.click(function(){
changeTotal(opt2);
});
opt3.click(function(){
changeTotal(opt3);
});
});
</script>
jQuery 일괄처리 방식
<script>
$(document).ready(function(){
let total = parseInt($("#total").val());
let opts = $(".opt");
function changeTotal(){
for(let opt of opts){
if(opt.is(':checked')){
total += parseInt(opt.val());
} else {
total -= parseInt(opt.val());
}
}
$("#total").val(total)
}
});
</script>
