체크박스 숫자 계산 질문드립니다.
본문
안녕하세요
체크박스 클릭하면 하단에 자동으로 숫자가 합해져서 나오고 있습니다.
<script>
function calc( event )
{
var result = 0;
var obj;
var form_obj = document[event.form.name];
var form_length = form_obj['checkbox'].length;
for ( var i=0; i<form_length; i++ )
{
obj = form_obj['checkbox'][i];
if ( obj.checked == true )
result += parseInt(obj.getAttribute('value'));
}
form_obj['result'].value=result;
}
</script>
<ul>
<li>
<img src="thum1.jpg">
<p>테스트상품1</p>
<input type="checkbox" name="checkbox" value="1000" onclick="calc( this );" />1000
</li>
<li>
<img src="thum2.jpg">
<p>테스트상품2</p>
<input type="checkbox" name="checkbox" value="2000" onclick="calc( this );" />2000
</li>
</ul>
<div class="total">
<input type="text" name="result" value="0" />
</div>
숫자합계는 잘되는데요..
이때 총합계 위에
테스트상품1 : 1000원, 테스트상품2 : 2000원
이런식으로 선택한 박스의 이름과 가격이 같이 뜨게 하고 싶습니다.
value 값에 이름과 가격을 동시에 넣는건 안될것 같고
제가 알고있는 한계치를 초과하여
염치없이 글을 올려봅니다.ㅠ
혹시 잘 알고 계신 고수님들 도움을 부탁드리옵니다...
답변 1
<script>
function calc( event )
{
var result = 0;
var desc_txt = [];
var obj;
// var form_obj = document[event.form.name];
var form_obj = event.form;
var form_length = form_obj['checkbox'].length;
var desc = document.getElementById('desc');
for ( var i=0; i<form_length; i++ )
{
obj = form_obj['checkbox'][i];
if ( obj.checked == true ) {
result += parseInt(obj.getAttribute('value'));
desc_txt.push(obj.parentNode.querySelector('p').innerHTML);
}
}
desc.innerHTML = desc_txt.join(',');
form_obj['result'].value=result;
}
</script>
<form>
<ul>
<li>
<img src="thum1.jpg">
<p>테스트상품1</p>
<input type="checkbox" name="checkbox" value="1000" onclick="calc( this );" />1000
</li>
<li>
<img src="thum2.jpg">
<p>테스트상품2</p>
<input type="checkbox" name="checkbox" value="2000" onclick="calc( this );" />2000
</li>
</ul>
<div class="total">
<div id="desc"></div>
<input type="text" name="result" value="0" />
</div>
</form>
와. 정말 감사합니다. 대단하세요!!
제가 하고 싶은 딱 그대로 입니다. 정말 감사합니다!!
한가지더 정말정말 염치없지만 여쭤봐도 될런지요..
출력되는 상품명 옆에 (1000) 가격까지 넣고싶은데요 ㅠㅜ
가능하시면 부탁드리겠습니다.!!! 감사합니다!!!!
// desc_txt.push(obj.parentNode.querySelector('p').innerHTML);
desc_txt.push(obj.parentNode.querySelector('p').innerHTML + ' (' + obj.value + ')');
정말감사합니다 선생님!!
답변을 작성하시기 전에 로그인 해주세요.