Множественное значение флажка с полем ввода значения - JQuery

Question

В настоящее время я пытаюсь получить значение, которое я возвращаю из флажка, чтобы умножить значение в поле ввода с помощью jQuery.

Я показываю div, когда установлен флажок, чтобы задать его количество, после чего я должен умножить количество со значением этого флажка.

Здесь пока текущий код:

$(document).ready(function() { 
    var sum = 0; 
    var qty = 0; 

    $("input[type=checkbox]").change(function() { 
     recalculateQty(); 
     recalculateCheck(); 
     if ($('#1').is(':checked')) { 
      $('#checked-1').show(); 
     } else { 
      $('#checked-1').hide(); 
     } 
     if ($('#2').is(':checked')) { 
      $('#checked-2').show(); 
     } else { 
      $('#checked-2').hide(); 
     } 
     if ($('#3').is(':checked')) { 
      $('#checked-3').show(); 
     } else { 
      $('#checked-3').hide(); 
     } 
    }); 

    function recalculateQty() { 
     $('.qty').keyup(function() { 
      $('.qty').each(function() { 
       qty += parseInt(this.value, 10); 
       recalculateCheck(); 
      }); 
     }); 
    } 

    function recalculateCheck() { 
     var sum = 0; 
     $("input[type=checkbox]:checked").each(function() { 
      sum += parseInt($(this).val()); 
     }); 
     $('.qty').keyup(function() { 
      $('.qty').each(function() { 
       qty += parseInt(this.value, 10); 
      }); 
     }); 
     $('#total').val(sum * qty); 
    } 
}); 

<input type="checkbox" id="1" value="30" name="1" /> 
<input type="checkbox" id="2" value="60" name="2" /> 
<input type="checkbox" id="3" value="90" name="3" /> 

<div style="display:none;" id="checked-1"> 
    <input type="text" name="product_1_qty" id="product_1_qty" placeholder="Quantity" class=" qty" value="0" /> 
</div> 

http://jsfiddle.net/isherwood/9vRtJ/1/

Answer 1

Вы пытаетесь установить значение элемента с total ID в качестве конечного результата, но нет такой элемент в вашем html-коде.
Просто добавьте этот элемент в вашем HTML код (здесь я положил еще текстовое поле):

<input type="text" id='total'> 

Отъезд Live demo for your fix

Или вы можете лучше использовать кодирование: (Читать комментарии) - Working DEMO

$(document).ready(function() { 
    var sum = 0; 
    var qty = 0; 
    $("input[type=checkbox]").change(function() { 
     if ($('#1').is(':checked')) { 
      $('#checked-1').show(); 
     } else { 
      $('#checked-1').hide(); 
     } 
    }); 
    $('.qty').keyup(function() { // if user typed anyting in the Quantity 
      sum = parseInt($('#1').val()); // get checkbox value and change the data type to int 
      qty = parseInt($(this).val()); // get Quantity value and change the data type to int 
      //console.log(sum,qty); 
      if(sum && qty) { // if the values was not empty 
       $('#total').val(sum * qty); // show the result in the total element 
      } else { // if the values was empty 
       $('#total').val(''); // clear the result textbox 
      } 
    }); 
});