jQuery : 클릭시 속성 값을 더함

Question

전자 상거래 사이트가 있습니다. 주 제품에 다양한 변형과 ​​추가 기능을 선택할 수있는 제품 페이지가 있습니다. 고객이 옵션을 클릭 할 때 가격을 동적으로 표시하고 싶습니다.

기본 HTML은 다음과 같습니다 카트 기능을 추가하고 난 분명 아무것도 그 가격이 고도로 설정되어 변경할 수 있지만 수 있고 제목이 jQuery를 클릭 목표를 설정하기위한

<div class="addons"> 
    <input type="radio" name="products[39][addons][Handles]" title="Handles" value="579" alt="7.00" class="options"> Bronze Left 
    <input type="radio" name="products[39][addons][Handles]" title="Handles" value="580" alt="8.00" class="options"> Bronze Right 
    <input type="radio" name="products[39][addons][Handles]" title="Handles" value="581" alt="9.00" class="options"> Chrome Left 
    <input type="radio" name="products[39][addons][Handles]" title="Handles" value="582" alt="10.00" class="options"> Chrome Right 

    <input type="radio" name="products[39][addons][Glass]" title="Glass" value="589" alt="18.00" class="options"> Brass Clarity 
    <input type="radio" name="products[39][addons][Glass]" title="Glass" value="590" alt="20.00" class="options"> Zinc Abstract 
    <input type="radio" name="products[39][addons][Glass]" title="Glass" value="591" alt="21.00" class="options"> Zinc Elegance 
    <input type="radio" name="products[39][addons][Glass]" title="Glass" value="592" alt="23.00" class="options"> Zinc Prairie 
</div> 

값 속성이 사용됩니다.

jQuery와 관련하여 도움이 필요합니다. 내가 가지고있는 문제는 var 가격을 클릭 기능 외부의 서로에게 더할 수있는 방법을 모른다는 것입니다. 내가 이해하고있어 경우

$("input[type='radio'][title='Handles']").click(function() { 
    price = $(this).val(); 
} 

$("input[type='radio'][title='Glass']").click(function() { 
    price = $(this).val(); 
} 

Answer 1

정확하게 이해하고 있으면 선택한 각 옵션의 가격을 합산하려고합니다.

// An object to keep track of the total amount of each title 
var total = {}; 

// Change event on the radio buttons 
$('input[type=radio]').change(function() { 
    // Assign the alt to the total object with the key name being the title 
    total[$(this).attr('title')] = parseFloat($(this).attr('alt')).toFixed(2); 

    // Output the result to HTML (optional) 
    outputTotal(); 
}); 

function outputTotal() 
{ 
    // Here all the prices are being summed 
    var sum = 0; 

    for(var index in total) 
    { 
     sum += total[index]; 
    } 

    // And output to HTML 
    $('.total').html(sum); 
} 

jsFiddle example

Answer 2

, 당신은 단지 고도의 값을 추가 할.

var total = 0; 
$(".addons").find("input:checked").each(function() { 
    total += parseFloat($(this).attr('alt')); 
}); 

당신은 클릭 처리기에서이 코드를 실행하는 것, 및 업데이트 어떤 HTML은 전체가 표시됩니다 : 당신은 다음과 같은 것을 할 수 있습니다.

EDIT "input : checked"는 "input [checked = checked]"보다 깔끔합니다.

Answer 3

input[type='radio']:checked을 사용하면 찾고있는 요소를 필터링하고 가져올 수 있습니다.

var total = 0; 

// Get all the input tags that are checked. 
$(".addons").find("input[type='radio']:checked").each(function() { 
    total += parseFloat($(this).attr('alt')); 
}); 

Answer 4

var inputs = $(".addons input.options"); 
inputs.click(function() { 
    var total = 0; 
    $(".addons").find(":checked").each(function(){ 
     total += parseFloat($(this).attr("alt")); 
    }); 
    $("#total").val(total); 
}); 

http://jsfiddle.net/tive/fyZbV/