라디오버튼 과 콤보상자를 이용한 계산방법
본문
<form name="form1">
<table style="width:100%; border-top:2px solid #000; font-size:15px; ">
<tr>
<td height="50"> 가격계산 </td>
<td>
<input type="radio" name="main" value="1000" onClick="my_calc(this, this.form.main_count, this.form.main_sum)">
사과
<input type="radio" name="main" value="5000" onClick="my_calc(this, this.form.main_count, this.form.main_sum)">
배
<input type="hidden" value="6" name="main_count" >
<input type="text" name="main_sum" size=10 readonly value="0">
</td>
</tr>
<tr>
<td height="50"> 수량 </td>
<td>
<input type="radio" name="count" value="1" onClick="my_calc(this, this.form.count_count, this.form.count_sum)">
1개
<input type="radio" name="count" value="2" onClick="my_calc(this, this.form.count_count, this.form.count_sum)">
2개
<input type="hidden" value="6" name="count_count" >
<input type="text" name="count_sum" size=10 readonly value="0">
</td>
</tr>
<tr>
<td height="50"> 수량 </td>
<td>
<select name="ccount" onchange="handleOnChange(this)">
<option value="1">1 개</option>
<option value="2">2 개</option>
<option value="3">3 개</option>
<option value="4">4 개</option>
<option value="5">4 개</option>
</select>
<div id='result'></div>
</td>
<tr>
<td>
<input type=text name="total3" size=10 value="0" style="background:#f4f4f4; font-size:24px;font-weight:bold;color:red;border:0;">
<span>원(VAT별도)</span></td>
</tr>
</table>
</form>
<script language="javascript">
<!-- 라디오상자 계산 --!>
function my_calc(item, item_count, item_sum){
if(item_count.value < 6)
var count = 00;
else
var count = item_count.value - 5;
item_sum.value = eval(item.value) * eval(count) ;
my_total3(document.form1);
}
<!-- 콤보박스 계산 --!>
function handleOnChange(e) {
// 선택된 데이터 가져오기
const value = e.value;
// 데이터 출력
document.getElementById('result').innerText
= value;
}
function my_total3(f){
f.total3.value = eval(f.main_sum.value) * eval(f.count_sum.value);
f.total3.value = comma(f.total3.value)
}
</script>
라디오버튼 과 콤보상자를 이용하여 계산실을 만들고 싶습니다.
라디오상자 와 라디오상자 끼리 계산하는 방법은 인터넷을 찾아 해결을 했는데요...
라디오상자와 콤보상자값을 이용한 계산은 아무리 찾아봐도 쉽게 찾을수가 없는것 같네요 ㅜ.ㅜ
혹시 고수님들중에 해결할 수 있으신 분 계실까요~~~~???
답변 2
대충 짜 봤으니 알아서 응용하세요.
결과확인 - https://wittazzurri.com/editor/html_editor.php
<input type="radio" name="myRadio" value="1000"> 사과
<input type="radio" name="myRadio" value="5000"> 배
<input id="myInput">
<br>
<select id="mySelect">
<option value="1">1개</option>
<option value="2">2개</option>
<option value="3">3개</option>
<option value="4">4개</option>
<option value="5">5개</option>
</select>
<br>
<span id="mySpan"></span>
<script>
for (i of document.querySelectorAll("input[name='myRadio']")) {
i.onclick = function() { myInput.value = this.value; }
}
mySelect.onchange = function() { mySpan.innerHTML = Number(myInput.value) * Number(this.value); }
</script>
다음과 같은 방법도 있으니 참고해 보세요
<form name="form1">
<table style="width:100%; border-top:2px solid #000; font-size:15px; ">
<tr>
<td height="50"> 가격계산 </td>
<td>
<input type="radio" name="main" value="1000" onClick="calculate()">
사과
<input type="radio" name="main" value="5000" onClick="calculate()">
배
<input type="hidden" value="6" name="main_count" >
<input type="text" name="main_sum" size=10 readonly value="0">
</td>
</tr>
<tr>
<td height="50"> 수량 </td>
<td>
<input type="radio" name="count" value="1" onClick="calculate()">
1개
<input type="radio" name="count" value="2" onClick="calculate()">
2개
<input type="hidden" value="6" name="count_count" >
<input type="text" name="count_sum" size=10 readonly value="0">
</td>
</tr>
<tr>
<td height="50"> 수량 </td>
<td>
<select name="ccount" onchange="calculate()">
<option value="1">1 개</option>
<option value="2">2 개</option>
<option value="3">3 개</option>
<option value="4">4 개</option>
<option value="5">5 개</option>
</select>
<div id='result'></div>
</td>
</tr>
<tr>
<td>
<input type=text name="total3" size=10 value="0" style="background:#f4f4f4; font-size:24px;font-weight:bold;color:red;border:0;">
<span>원(VAT별도)</span>
</td>
</tr>
</table>
</form>
<script language="javascript">
function calculate() {
var mainRadio = document.querySelector('input[name="main"]:checked');
var countRadio = document.querySelector('input[name="count"]:checked');
var countSelect = document.querySelector('select[name="ccount"]');
var mainCount = document.form1.main_count.value;
var countCount = document.form1.count_count.value;
var mainSum = 0;
var countSum = 0;
if (mainRadio) {
mainSum = mainRadio.value * mainCount;
}
if (countRadio) {
countSum = countRadio.value * countCount;
}
if (countSelect) {
countSum = countSelect.value * countCount;
}
document.form1.main_sum.value = mainSum;
document.form1.count_sum.value = countSum;
document.form1.total3.value = mainSum + countSum;
document.form1.total3.value = comma(document.form1.total3.value);
}
function comma(num) {
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
</script>
