Измените цены, нажав на флажок
Я сейчас ищу помощь в этом вопросе. Проблема здесь в том, что вместо того, чтобы делать значение флажка + предыдущее значение, он складывает все вместе, например, ставит «10», а после щелчка другого флажка он добавляет к нему значение и не считает его как «1020» вместо выполнения 10. +20
$(document).ready(function() {
$("input[type=checkbox]").click(function() {
var total = 0;
$("input[type=checkbox]:checked").each(
function() {
total = total + parseInt($(this).val());
});
var input = document.getElementById("valor");
input.value += input.value + total;
});
});<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Comissões Técnicas</label>
<label class = "container newlabel">CPT
<input type = "checkbox" value = "10" name = "cpt" >
<span class = "checkmark"></span>
</label><br>
<label class = "container newlabel">CPGA (Gratuito para Sócios da SPG)
<input type = "checkbox" value = "10" name = "cpga" >
<span class = "checkmark"></span>
</label><br>
<input id = "valor" type = "text">
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Код
input.value += input.value + total;
означает (поскольку input.value - это String) объединить input.value с total после того, как убедится, что total - это String. Не используйте += и обязательно используйте parseInt() на том, что вы хотите использовать в качестве числа.
$(document).ready(function() {
$("input[type=checkbox]").click(function() {
var total = 0;
$("input[type=checkbox]:checked").each(
function() {
total = total + parseInt($(this).val());
});
var input = document.getElementById("valor");
/*
* You don't need +=
* You do need to parseInt
* You need to make sure to handle empty String ""
*/
input.value = (parseInt(input.value, 10) || 0) + total;
});
});<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Comissões Técnicas</label>
<label class = "container newlabel">CPT
<input type = "checkbox" value = "10" name = "cpt" >
<span class = "checkmark"></span>
</label>
<br>
<label class = "container newlabel">CPGA (Gratuito para Sócios da SPG)
<input type = "checkbox" value = "10" name = "cpga" >
<span class = "checkmark"></span>
</label><br>
<input id = "valor" type = "text">Пожалуйста, поправьте меня, если я не совсем понимаю вашу проблему, но разве вам не нужно просто поменять input.value += input.value + total; на input.value = total; для получения требуемого результата?
Спасибо, это результат непрерывного кодирования в течение нескольких часов, ошибка была прямо передо мной, и я даже не видел ... Я не могу голосовать, как только я заболею +1
Проверьте, нужно ли обрабатывать repeatedlyclick на флажке, а также на uncheck оценка должна уменьшиться.
$(document).ready(function() {
$("input[type=checkbox]").click(function() {
var total = 0;
total = parseInt(document.getElementById("valor").value);
if (isNaN(total)){
total = 0;
}
if ($(this).prop('checked')){
total = total + parseInt($(this).val());
} else {
total = total - parseInt($(this).val());
};
var input = document.getElementById("valor");
input.value = total;
});
}); <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Comissões Técnicas</label>
<label class = "container newlabel">CPT
<input type = "checkbox" value = "10" name = "cpt" >
<span class = "checkmark"></span>
</label><br>
<label class = "container newlabel">CPGA (Gratuito para Sócios da SPG)
<input type = "checkbox" value = "20" name = "cpga" >
<span class = "checkmark"></span>
</label><br>
<input id = "valor" type = "text">Поскольку вы используете jQuery, и мне нравится метод пользователя reduce, я могу посоветовать вам это решение.
$(document).ready(function() {
$("input[type=checkbox]").click(function() {
var total = $('input[type=checkbox]:checked').toArray().reduce(function(pre, post) {
return pre + parseInt($(post).val());
}, 0);
$('#valor').val(total);
});
});<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Comissões Técnicas</label>
<label class = "container newlabel">CPT
<input type = "checkbox" value = "10" name = "cpt" >
<span class = "checkmark"></span>
</label><br>
<label class = "container newlabel">CPGA (Gratuito para Sócios da SPG)
<input type = "checkbox" value = "20" name = "cpga" >
<span class = "checkmark"></span>
</label><br>
<input id = "valor" type = "text">Если ваш value всегда является числом, вы можете использовать value / 1 для преобразования числовой строки в числовой тип. Это только в том случае, если вы УВЕРЕНЫ, что число всегда будет числом, а не строкой, содержащей число, например. 11.jpg не действителен.
Это тест производительности для вашего случая: https://jsperf.com/parseint-versus-divide-by-one/1
Таким образом, вы можете переписать код как:
$(document).ready(function() {
$("input[type=checkbox]").click(function() {
var total =
$('input[type=checkbox]:checked').toArray().reduce(function(pre, post) {
var val = $(post).val() / 1;
return pre + (val ? val : 0);
}, 0);
$('#valor').val(total);
});
});
Спасибо за новое понимание. Мне удалось заставить свой код работать, но было приятно увидеть другой метод, и я обязательно оставлю его отмеченным для дальнейшего использования!
Я рад этому, я добавил другой подход и тест производительности для обоих вариантов использования.
когда вы используете
input.value += input.value + total;, вы суммируете строкуinput.value, другую строкуinput.valueи получаете «10» + «10» + 10, которая вернет вам строку101010, вы должны использоватьinput.value = +input.value + total;, здесь вы получите номерinput.value=input.valueплюс номерtotalи вернете 20