Javascript data- * калькулятор атрибутов

0

Проблема в том, что выбор элементов суммировал друг друга. Значение элемента, указанного в "цене данных". Мой код недействителен и не обрабатывается должным образом, желательно изменить сумму при любой депрессии. Спасибо за любую помощь условно

HTML

<input name="tarifs" id="tarifs2" type="radio" data-price="590" value="Abs">
<input name="tarifs" id="tarifs1" type="radio" data-price="540" value="Abs"><br/>
<input name="tv[]" id="tv3" type="checkbox" data-price="150" value="Abs">
<input name="tv[]" id="tv2" type="checkbox" data-price="100" value="Abs"><br/>
<input name="tv2[]" id="tv4" type="checkbox" data-price="250" value="Abs">
<input name="tv2[]" id="tv5" type="checkbox" data-price="350" value="Abs"><br/>
Sum: <span id="checkout-sum"></span></div>

JS

$("input[name=tarifs]").keyup(function() {
    var sum1 = $("input[name=tarifs]").data("price");
    var sum2 = $("input[name=tv[]]").data("price");
    var sum3 = $("input[name=tv2[]]").data("price");

    var total = sum1 + sum2 + sum3;

    $("#checkout-sum").val(total);
});

jsfiddle demo

  • 0
    Измените .keyup( на .change( и посмотрите в консоли. После этого посмотрите на селекторы
  • 0
    Что именно вы хотите в качестве вывода / результата? Сумма всех проверенных значений? Или просто сумма всех флажков?
Показать ещё 1 комментарий
Теги:
checkbox

3 ответа

1
Лучший ответ

Будет использовать событие change и искать только проверенные входы. Это будет работать, если какое-либо из отображаемых радиостанций или флажков

$inputs=$('#tarifs1,#tarifs2,#tv2,,#tv3,#tv4,#tv5').change(function(){
    var total=0;
    $inputs.filter(':checked').each(function(){
        total+= $(this).data('price');
     });
    $("#checkout-sum").text(total);
})

DEMO

  • 0
    Спасибо, ваша версия работает =) jsfiddle.net/4Chv2/5 . Только один вопрос, вы можете сделать место идентификатором задания (# tarifs1), именем задания (name = "tarifs")? потому что, вероятно, будет много id.
  • 0
    Используйте один класс для всех тех, которые вы хотите включить. Тогда только нужно использовать этот класс для селектора
Показать ещё 1 комментарий
0

Попробуйте использовать это: -

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

    var sum1 = $("input[name='tarifs']:checked").data("price"),
    sum2 = 0,
    sum3= 0;

    $.each($("input[name='tv[]']:checked"), function(index,item) {
      sum2 += $(item).data('price');
   });

      $.each($("input[name='tv2[]']:checked"), function(index,item) {
       sum3 += $(item).data('price');
    });

    var total = +sum1 + sum2 + sum3;

    $("#checkout-sum").html(total);
});
0

Попробуйте следующее: ваши недостающие кавычки в селекторе jQuery: $ ("input [name = 'tv []' ]

$("input[name=tarifs],[name='tv[]'],[name='tv2[]']").change(function() {
    var sum1 = $("input[name=tarifs]:checked").data("price"); 
    var sum2 = $("input[name='tv[]']:checked").data("price");    
    var sum3 = $("input[name='tv2[]']:checked").data("price");  
    var total = sum1 + sum2 + sum3;
  $("#checkout-sum").html(total);
});

демонстрация

другой путь:

$input = $("input[name=tarifs],[name='tv[]'],[name='tv2[]']");

$input.change(function() {
    var sum = 0;
    $input.filter(':checked').each(function(){
       sum = sum + $(this).data("price");
    });
  $("#checkout-sum").html(sum);
});

демонстрация

  • 0
    Не работает должным образом = (. Если вы выберете $ tarifs1, который отображает 590. Когда data-price = "540". + Вы можете сделать это, если вы измените выбор, все данные были пересчитаны?
  • 0
    @ user2978570 Проверьте мой обновленный ответ и возитесь
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню