자바스크립트 체크박스 관련 질문입니다.
본문
위 사진에서 복지할인 과 부과세를 동시에 눌렀을때 가격을 위 표시된 가격에 보이게 하는겁니다.
복지할인을 누르면 그의 맞는 가격이 위 가격표에 표시되지만..
복지할인 부과세 할부이자 동시에 누르면 각각 표시가 됩니다.
저렇게 표시가 되고 있습니다.
소스는...
< tr id="change6" >
<td align="center" style="padding:10px; background-color:#f9f9f9;"><font style="font-size:22px; color:#f65672;"><span id="a6"> 0</span></font> 원</td>
</tr>
위 소스는 원래 표시되어 있는 가격입니다. 이가격에 밑에 체크하면 변화하는겁니다.
<tr id="change12" style="display:none" >
<td align="center" style="padding:10px; background-color:#f9f9f9;"><font style="font-size:22px; color:#f65672;"><span id="d1"> </span></font> 원</td>
</tr>
이게 복지할인 값이고
<tr id="change7" style="display:none" >
<td align="center" style="padding:10px; background-color:#f9f9f9;"><font style="font-size:22px; color:#f65672;"><span id="a9"> 0</span></font> 원</td>
</tr>
이게 부과세 할부이자 값입니다.
각각 체크버튼은
<tr>
<th scope="row">복지할인</th>
<td><input type="checkbox" name="halin2" value="1" onClick="halin1(this);" > 할인35% <br ></td>
</tr>
<tr>
<th scope="row">부과세+할부이자</th>
<td><input type="checkbox" name="chek" value="1" onClick="show3(this);" ><br ></td>
</tr>
이렇게 만들어졌습니다.
스크립트 부분입니다.
function show3(v,id ){
if(v.checked==true){
document.getElementById("change7").style.display="";
document.getElementById("change6").style.display="none";
document.getElementById("change9").style.display="";
document.getElementById("change8").style.display="none";
}else{
document.getElementById("change6").style.display="";
document.getElementById("change7").style.display="none";
document.getElementById("change8").style.display="";
document.getElementById("change9").style.display="none";
}
}
위에 것이 부과세 할부이자 스크립트 부분입니다. 체크했을때 그이 맞는 값이 들어가는거죠
if(v.checked==true) {
document.getElementById("change12").style.display="";
document.getElementById("change6").style.display="none";
document.getElementById("change15").style.display="";
document.getElementById("change8").style.display="none";
}else{
document.getElementById("change12").style.display="none";
document.getElementById("change6").style.display="";
document.getElementById("change15").style.display="none";
document.getElementById("change8").style.display="";
}
}
위에는 복지할인 관련 스크립트입니다.
제가 초보라 좀 어렵게 짜서....여기서 막히네요
그리고 복지할인과 부과세할부이자 버튼 두개를 누르면 원래 가격표에 새롭게 변화되는 값은
<tr id="change16" style="display:none" >
<td align="center" style="padding:10px; background-color:#f9f9f9;"><font style="font-size:22px; color:#f65672;"><span id="d6"> </span></font> 원</td>
</tr>
답변 1
올려주신 부분으로 나름 짜봤습니다.
우선 몇가지 팁을 말씀드리면 먼저 보셔야할께.. 어떻게 금액을 가지고 와서 계산을 할것인지를
염두를 하셨으면 합니다.
그리고 display 부분이 좀 잘못된듯합니다 이부분은 제가 좀 알맞게 고쳐봤습니다.
아래 짠 code부분이 딱 맞지는 않을것입니다. 허나 보시고 응용을 하셔서 최대한 적용을 하시는게
정답이 아닐까 생각됩니다.
<tr id="change12" style="display:none" >
<td align="center" style="padding:10px; background-color:#f9f9f9;"><font style="font-size:22px; color:#f65672;"><span id="d1"> 1000 </span></font> 원</td>
</tr>
<!-- 복지할인 -->
<tr id="change6">
<td align="center" style="padding:10px; background-color:#f9f9f9;"><font style="font-size:22px; color:#f65672;"><span id="a6"> 0</span></font> 원</td>
</tr>
<!-- 부가세+할부이자 -->
<tr id="change7" style="dsplay:none" >
<td align="center" style="padding:10px; background-color:#f9f9f9;"><font style="font-size:22px; color:#f65672;"><span id="a9"> 0</span></font> 원</td>
</tr>
<tr>
<th scope="row">복지할인</th>
<td><input type="checkbox" name="halin2" value="1" onClick="halin1(this);" > 할인35% <br ></td>
</tr>
<tr>
<th scope="row">부과세+할부이자</th>
<td><input type="checkbox" name="chek" value="1" onClick="show3(this);" ><br ></td>
</tr>
<script language="javascript">
function halin1(v,id ) {
if(v.checked==true) {
// 기본가격
var origin_price = parseInt(document.getElementById("d1").value );
// 35% 할인가격 (기본가격에서 35%를 뺀 가격이 할인 가격입니다.)
var sale_price = origin_price - (origin_price * 0.35) ;
document.getElementById("change6").style.display="block";
document.getElementById("a6").style.display= sale_price;
}else{
document.getElementById("change6").style.display="none";
document.getElementById("a6").style.display="0";
}
}
function show3(v,id ) {
if(v.checked==true) {
// 기본가격
var origin_price = parseInt(document.getElementById("d1").value );
var vat_price = origin_price * 0.1; // 10% 부가세
var fee_price = origin_price * 0.01; // 이자 (1% 로 봤을경우)
// 부과세+할부이자 를 합산한가격
var sum_fee_price = vat_price + fee_price;
document.getElementById("change7").style.display="block";
document.getElementById("a9").style.display="";
}else{
document.getElementById("change7").style.display="none";
document.getElementById("a9").style.display="0";
}
}
</script>
그럼 도움이 되셨길....~~ ^^
감사합니다 도움이 많이되었습니다.
