추가 기능

개인적인 용도로 작은 상점으로 웹 사이트를 만들고 있는데, 여기에서 가장 중요한 질문은 모든 기능을 추가 기능으로 코딩하는 방법입니다.추가 기능

프린터, 모니터, 모뎀 또는 친숙한 기타 장치를 포함한 다양한 유형의 주변 장치에 대한 6 개의 단일 확인란입니다. $ 500.00의 기본 컴퓨터 시스템 가격을 가정하고 사용자 수표를 기준으로 적절한 가격을 추가하십시오.
모니터 299.99 프린터 129.99 스피커 49.99 CDRW 159.99 스캐너는 129.99 모뎀 난 그냥 스캐너를 추가하면 49.99

, 내 총 $ 629.99 될 것입니다. 모뎀과 모니터를 추가하면 합계는 $ 849.98입니다. 이 숙제

<html> 
<head> 
<title>Problem 9</title> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
<script type="text/javascript"> 
// Program name: Problem 9 
// Purpose: Program 9 
// Author: Opack 
// Date last modified: 2-13-12 
$(function() { 
    function calculateCost() { 
    var ret = 500; 
    var $selected = $('input:checked', $peripherals); 

    $selected.each(function() { 
     ret += parseFloat($(this).attr('alt')); 
    }); 

    return ret.toFixed(2); 
    } 

    function setCost() { 
    $total.text(calculateCost()); 
    } 

    var $peripherals = $('#peripherals'); 
    var $total = $('#total'); 
    $('input[type="checkbox"]', $peripherals).on('change', setCost); 

    setCost(); 

}); 

</script> 
<style> 
    h1 { 
    font-size: large; 
    } 
</style> 
</head> 
<body bgcolor="yellow"> 
    <h1>What peripherals do you want to add?</h1> 
    <form id="peripherals"> 
     <input type="checkbox" name="Monitor" value="Monitor" alt="299.99">Monitor<br> 
     <input type="checkbox" name="Printer" value="Printer" alt="129.99">Printer<br> 
     <input type="checkbox" name="Speakers" value="Speakers" alt="49.99">Speakers<br> 
     <input type="checkbox" name="CDRW" value="CDRW" alt="159.99">CDRW<br> 
     <input type="checkbox" name="Scanner" value="Scanner" alt="129.99">Scanner<br> 
     <input type="checkbox" name="Modem" value="Modem" alt="49.99">Modem<br> 
     <label for="Cost">Total</label><input type="text" name="Cost" /> 
    </form> 
</body> 

</body> 
</html>

출처

2012-02-11 Opack Odore

또한? –

수정 된 OP 설명 더보기. –

여기 내 attempt입니다. 결국 jQuery를 사용하고 비용을 자동으로 업데이트했습니다. 나는 비용 정보를 체크 박스의 "alt"속성에 첨부했다. 다른 방법으로도이 작업을 수행 할 수 있습니다. 귀하의 목적에 맞게 조정하십시오.

경우 jsbin에

jQuery 코드는 흉상 간다 ...

$(function() { 
    function calculateCost() { 
    var ret = 500; 
    var $selected = $('input:checked', $peripherals); 

    $selected.each(function() { 
     ret += parseFloat($(this).attr('alt')); 
    }); 

    return ret.toFixed(2); 
    } 

    function setCost() { 
    $total.attr('value', calculateCost()); 
    } 

    var $peripherals = $('#peripherals'); 
    var $total = $('input[name="Cost"]'); 
    $('input[type="checkbox"]', $peripherals).on('change', setCost); 

    setCost(); 
});

그리고 관련 HTML : 무엇

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
<meta charset=utf-8 /> 
<title>Cost Demo/title> 
<style> 
    h1 { 
    font-size: large; 
    } 
</style> 
</head> 
<body> 
    <h1>What peripherals do you want to add?</h1> 
    <form id="peripherals"> 
     <input type="checkbox" name="Monitor" value="Monitor" alt="299.99">Monitor<br> 
     <input type="checkbox" name="Printer" value="Printer" alt="129.99">Printer<br> 
     <input type="checkbox" name="Speakers" value="Speakers" alt="49.99">Speakers<br> 
     <input type="checkbox" name="CDRW" value="CDRW" alt="159.99">CDRW<br> 
     <input type="checkbox" name="Scanner" value="Scanner" alt="129.99">Scanner<br> 
     <input type="checkbox" name="Modem" value="Modem" alt="49.99">Modem<br> 
     <label for="Cost">Total</label><input type="text" name="Cost" /> 
    </form> 
</body> 
</html>

출처

2012-02-11 08:48:33

기본 비용이 누락되었습니다. 수학은 이제 괜찮을거야. –

조금 고쳐서 체크 상자를 클릭하면 총 비용이 추가되지 않는 것 같습니다. : S –

어딘가에서 코드를 공유 할 수 있습니까? 나는 여기에 어떤 논리를 놓칠지도 모른다. 총 비용은 단지 선택 기준입니다. 이 계산은 체크 박스가 변경 될 때마다 트리거됩니다. –

이다 : 나는이 기능을 추가 할 방법을 확실 해요로

여기에 내 현재 진행이다, 난 아직 너무 많은 JS 코드를 추가하지?

function calculation(a,b) 
{ 
    return a + b; 
}

SOURCE

W3Schools: Javascript Operators
W3Schools: Javascript Functions

출처

2012-02-11 07:34:43

아니요, OP에서 설명한대로 개인적인 용도로 사용됩니다. –

답변

관련 문제