체크하면 자동계산을 수량추가 계산식을 추가 하고 싶습니다...
본문
자바스크립트 수량 증가에 따른 계산법을 추가하려고 하는데요
제가 초보라서 잘 몰라서 질문 드립니다...
기존에는 체크박스를 누르면 체크박스 안에 있는 벨류가 계산이 되는 방식인데
수량칸을 따로 만들어서 수랴 증가에 따라서 계산값을 바꾸고 싶습니다...
고수님들 부탁드립니다..
지금 사용하고 있는 소스코드를 보여드리면
----------파일 내용--------
<table>
<td>
<input type="checkbox" name="wr_6" id="price1" value="10800"<?php echo ($write['wr_6'] == "10800") ? " checked" : "";?>>
</td>
<td>
<!--수량증가 추가 하고 싶습니다. -->
</td>
</table>
<div id="footer">
<p style="margin-top: 20px; ">예상 견적가<input class="text-font1" type="text" name="total" id="total" value="0" readonly="readonly">원</p>
</div>
----------스크립트 내용---------
<script>
function Calculator(){
let total = Number(document.getElementById("total").defaultValue);
for(let i = 1; i <= 100; i++){
let chkbox = document.getElementById("price" + i);
if(chkbox && chkbox.checked){
total += Number(chkbox.value);
}
}
// 숫자 형식을 변경하여 total을 업데이트
document.getElementById("total").value = total.toLocaleString();
}
for(let i = 1; i <= 100; i++){
let check = document.getElementById("price" + i);
if(check){
check.onclick = Calculator;
}
}
</script>
답변 1
<table>
<tr>
<td>
<input type="checkbox" name="wr_6" id="price1" value="10800"<?php echo ($write['wr_6'] == "10800") ? " checked" : "";?>>
</td>
<td>
<input type="text" id="qty1">개
</td>
</tr>
</table>
<div id="footer">
<p style="margin-top: 20px; ">예상 견적가<input class="text-font1" type="text" name="total" id="total" value="0" readonly="readonly">원</p>
</div>
<script>
function Calculator() {
let total = Number(document.getElementById("total").defaultValue);
for(let i = 1; i <= 100; i++){
let chkbox = document.getElementById("price" + i);
let qty = document.getElementById("qty" + i);
if (chkbox && chkbox.checked) {
total += Number(chkbox.value) * Number(qty.value);
}
}
// 숫자 형식을 변경하여 total을 업데이트
document.getElementById("total").value = total.toLocaleString();
}
for(let i = 1; i <= 100; i++) {
let check = document.getElementById("price" + i);
let check2 = document.getElementById("qty" + i);
if (check) {
check.onclick = Calculator;
}
if (check2) {
check2.onchange = Calculator;
}
}
</script>