Как добавить значения кнопок в jQuery

Question

Я пытаюсь суммировать значения кнопок, если на кнопки нажата кнопка. Например, есть «Button1». Если эта кнопка нажата, она должна добавить свое значение к сумме, которая будет отображаться в нижней части страницы. Если «Button1» щелкнут во второй раз, он должен вычесть его значение из суммы.

Вот моя попытка сделать это, но это ничего не делать вообще:

var value_Buttons = 0; 
var total = 0; 

$("button[name=Button1],[name=Button2],[name=Button3],[name=Button4],[name=Button5],[name=Button6]").click(function() { 
    if($(this).hasClass('active') == false) { 
     value_Buttons += parseInt($(this).val()); 
    } else if($(this).hasClass('active') == true) { 
     value_Buttons -= parseInt($(this).val()); 
    } 
    total += value_Buttons; 
    alert(total); 
}); 

total = value_Buttons + value_Optional_Button; 
$("input[name=value_sum]").val(total); 

Кроме того, здесь код для кнопки образцовой (как «Button1»):

<div class="form-group col-md-2"> 
    <button type="button" class="form-control btn btn-primary" name="Button1" value="300" title="300 €" data-toggle="button" aria-pressed="false" autocomplete="off">Button 1</button> 
</div> 

Будут больше кнопок, но они будут отличаться только их именем и стоимостью.

Кроме того, коробка, которая будет отображать сумму значений кнопок в настоящее время выглядит следующим образом:

<div> 
    <label class="control-label">Sum</label> 
    <div class="input-group"> 
     <input class="form-control" name="value_sum" style="text-align:right" id="costs" value="" type="text" readonly> 
     <span class="input-group-addon">&euro;</span> 
    </div> 
</div> 

Я искал во всем Stackoverflow, а также с помощью Google и т.д. все же я могу» т найти что-нибудь или кто-нибудь с подобной проблемой

Answer 1

Блокирующей JS логической ошибки здесь:

$("input[name=value_sum]").val(total); 

эта линия должна быть в приведенном выше блоком коды. Добавлены исправления для вычитания:

var total = 0; 
 

 
$("button[name]").on("click", function() { 
 
    
 
    if(!$(this).hasClass('active')) { 
 
     total += Number($(this).val()); 
 
     $(this).addClass('active').html("remove " + $(this).attr("title")); 
 
    } else { 
 
     total -= Number($(this).val()); 
 
     $(this).removeClass('active').html("add " + $(this).attr("title")); 
 
    } 
 
    
 
    $("input[name=value_sum]").val(total); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group col-md-2"> 
 
    <button type="button" class="form-control btn btn-primary" name="Button300" value="300" title="300 €" data-toggle="button" aria-pressed="false" autocomplete="off">add 300 €</button> 
 
    <button type="button" class="form-control btn btn-primary" name="Button600" value="600" title="600 €" data-toggle="button" aria-pressed="false" autocomplete="off">add 600 €</button> 
 
</div> 
 
<div> 
 
    <label class="control-label">Sum</label> 
 
    <div class="input-group"> 
 
     <input class="form-control" name="value_sum" style="text-align:right" id="costs" value="0" type="text" readonly> 
 
     <span class="input-group-addon">&euro;</span> 
 
    </div> 
 
</div>

Answer 2

Линия 14 и 15 должна быть помещены в событии нажатия кнопки, чтобы обновить вход value_sum на каждом клике. Также ваш выбор для атрибута value немного немного. Способом вернуть значение атрибута кнопки с помощью JQuery является:

$(this).attr('value'); 

Таким образом, после этих двух пунктов, зачистка вашего кода, если и еще проверок, а также выбор кнопки с более чистым методом, вы должны иметь что-то вроде этого:

var total = 0; 

$("button[name=Button1], button[name=Button2], button[name=Button3], button[name=Button4], button[name=Button5], button[name=Button6]").click(function() { 
    total += $(this).attr('value'); 
    $("input[name=value_sum]").val(total); 
}); 

для отображения всего, что 0, во входной элемент на странице загрузки, вы можете использовать:

<input class="form-control" name="value_sum" style="text-align:right" id="costs" value="0" type="text" readonly> 

Answer 3

начать с создания слушателя для класса, будут применены ко всем вашим кнопкам.

$(.btn).click(function() { 
    //get value 
    var value = parseint($(this).attr("value")); 
    //check if already clicked 
    if($(this).hasClass('active') { 
    //set value of total 
    total = total - value; 
    //remove class active 
    $(this).removeClass('active'); 
    }else { 
    //set value of total 
    total = total + value; 
    //addclass active 
    $(this).addClass('active'); 
    } 
)}; 

Это то, что вам нужно?

Answer 4

Проверьте это fiddle.

Добавьте столько кнопок, сколько хотите, единственное, что вам нужно будет добавить к ним значение данных, чтобы выяснить, как добавить или вычесть. Я бы также выполнил поиск кнопок, используя класс вместо «кнопки», но это зависит от вас.

var buttons = {}; 
$("button").each(function (index, item) { 
    buttons[index] = 0; 
    $(item).click(function() { 
     var value = +($(item).data("value")), 
      val = +($("#costs").val()); 

     val += (!buttons[index]) ? value : -value; 
     buttons[index] = (!buttons[index]) ? 1: 0; 

     $("#costs").val(val); 
    }); 
}); 

Надеюсь, это поможет.

Answer 5

Working Demo

Здесь добавили имя класса «добавить» для всех кнопок, на кнопку его тумблер класс надстройку, суб в вас случае, если вы используете активный, неактивный класс

var total = 0; 
$("button[name=button1],[name=button2],[name=button3]").on('click', function() { 
    var self = $(this); 
    var gValue = Number(self.val()); 
    if (self.hasClass("add")) { 
     total += gValue; 
     self.removeClass("add").addClass("sub"); 
    } else { 
     total -= gValue; 
     self.removeClass("sub").addClass("add"); 
    } 
    $("#costs").val(total); 
});