jQuery로 체크 박스 합계 계산하기

Question

체크 박스에서 선택한 옵션에 따라 페이지 합계를 만들려고합니다.

<input type="checkbox" id="option1" name="option1" value="<?= $add[0] ?>" />t1 + &pound;<?= $add[0] ?><br /> 
<input type="checkbox" id="option2" name="option2" value="<?= $add[1] ?>" /t2 + &pound;<?= $add[1] ?><br /> 
<input type="checkbox" id="option3" name="option3" value="<?= $add[2] ?>" />t3 + &pound;<?= $add[2] ?><br /> 
<input type="checkbox" id="option4" name="option4" value="<?= $add[3] ?>" />t4 + &pound;<?= $add[3] ?> <br /> 

이 내 자바 스크립트가 작동하지 않는됩니다 :

var option1 = 0; 
var option2 = 0; 
var option3 = 0; 
var option4 = 0; 
var op = 0; 

var extra = document.getElementById('extra'); 

$(":input").change(function() 
{ 

    option1 = $("input[name=option1]:checked").attr("value"); 
    option2 = $("input[name=option2]:checked").attr("value"); 
    option3 = $("input[name=option3]:checked").attr("value"); 
    option4 = $("input[name=option4]:checked").attr("value"); 

    op = parseInt(option1) + parseInt(option2) + parseInt(option3) + parseInt(option4) ; 

    extra.innerHTML = '<p>&pound;'+op+'</p>'; 
}); 

내가 잘못 어딘가에 간 적이 여기

내 HTML 마크 업인가? 다른 합계가 작동 중이므로 스크립트에서 제거하여 읽기 쉽습니다.이 코드는 작동하지 않습니다!

편집 :

<input id="option1" name="option1" value="20" type="checkbox">t1 + £20<br> 
<input id="option2" name="option2" value="20" type="checkbox">t2 + £20<br> 
<input id="option3" name="option3" value="20" type="checkbox">t3 + £20<br> 
<input id="option4" name="option4" value="20" type="checkbox">t4 + £20 <br> 

ADDED RADIO :

당신의 HTML에 오류가 있습니다

<input id="delivery" name="delivery" value="0" checked="checked" type="radio"> Standard (72hrs) - no addtional charges<br> 
        <input id="delivery" name="delivery" value="200" type="radio"> 45hrs - £200 per email templates<br> 
        <input id="delivery" name="delivery" value="250" type="radio"> 24hrs - £250 per email templates<br> 

Answer 1

그것은 당신이 쉬운 함께 모든 체크 박스를 선택 (그리고 확신 할 수 될 경우 다른 체크 박스를 잡는하지 않는 당신은 잡아 싶지 않은 :

<div id="checkSet"> 
    <input type="checkbox" id="option1" name="option1" value="<?= $add[0] ?>" />t1 + &pound;<?= $add[0] ?><br /> 
    <input type="checkbox" id="option2" name="option2" value="<?= $add[1] ?>" /t2 + &pound;<?= $add[1] ?><br /> 
    <input type="checkbox" id="option3" name="option3" value="<?= $add[2] ?>" />t3 + &pound;<?= $add[2] ?><br /> 
    <input type="checkbox" id="option4" name="option4" value="<?= $add[3] ?>" />t4 + &pound;<?= $add[3] ?> <br /> 
</div> 

다음 모두를 선택하고 반복, 자신의 가치있는 합산 es :

var sum = 0; 
$('#checkSet :checked').each(function(){ 
    sum += parseInt($(this).val(), '10'); 
}); 

Answer 2

: 다음

<input type="checkbox" id="option2" name="option2" value="<?= $add[1] ?>" />t2 + &pound;<?= $add[1] ?><br /> 

당신으로 parseInt를 할 때 기본을 지정하는 것이 더 낫다는 당신은 구문 분석하고 있습니다 :

parseInt(option1, '10') 

그렇지 않으면 09과 같은 값에 이상한 문제가 발생할 수 있습니다.

생성 된 HTML 출력을 볼 수 있습니까? 아마도 체크 박스 값 중 하나가 숫자가 아니며 파싱 할 수 없습니다. 구문 분석하면 NaN이 반환되므로 값을 더할 때 문제가 발생합니다.

는이 코드와 작품을 사용하지만, 물론 바이올린에 훨씬 더

var extra = document.getElementById('extra'); 

$(":input").change(function() 
{ 
    var option1; 
var option2; 
var option3; 
    var option4; 
    var op = 0; 
    option1 = $("input[name=option1]:checked").attr("value"); 
    option2 = $("input[name=option2]:checked").attr("value"); 
    option3 = $("input[name=option3]:checked").attr("value"); 
    option4 = $("input[name=option4]:checked").attr("value"); 

    if (option1){ 
     op += parseInt(option1, '10'); 
    } 
    if (option2){ 
     op += parseInt(option2, '10'); 
    } 
    if (option3){ 
     op += parseInt(option3, '10'); 
    } 
    if (option4){ 
     op += parseInt(option4, '10'); 
    } 
    if (op > 0){ 
     extra.innerHTML = '<p>&pound;'+op+'</p>'; 
    }else{ 
     extra.innerHTML = ''; 
    } 
}); 

봐를 작성할 수 here