Массив JQuery и флажок ввода + скрыто

Question

Эй, ребята, у меня есть таблица с парой флажков, все эти флажки имеют числовое значение в скрытом вводе рядом с ними.Я хотел бы отобразить сумму тех во входном тексте внизу моей маленькой таблицы.Я дошел до сценария ниже, но оказалось, что мои знания JS и JQuery (кстати?) Минимальны.Любой ключ к тому, что лучший подход к этому?

<td>
    <input checked="checked" type="checkbox" class="processPaymentProducts" name="processPaymentProducts[]" value="<?=$transaction['student_transaction_id']?>" />
    <input type="hidden" id="prodPrice[<?=$transaction['student_transaction_id']?>]" name="prodPrice[<?=$transaction['student_transaction_id']?>]" value="<?=($transaction['student_transaction_amount_min']*100)?>" />
</td>

<script>
    $(document).ready(function() {
        $(".processPaymentProducts").click(function(){
            var amount;
            $amount = 0;
            jQuery.each($(".processPaymentProducts:checked").val(), function() {
                $amount += $(this).next('input').val();
                console.log($(this).next('input').val());
            });
            if($amount>100) { $amount = $amount/100; } else { $amount = 0; }
            $('#processPaymentAmount').val($amount);
        });
    });
</script>

Answer 1

Для начала вам не нужен селектор внутри .next (). .Next будет работать нормально, учитывая вашу разметку. Кроме того, .each не работает так, как вы его используете. Я изменил это. Кроме того, когда вы делаете математику на основе входных значений, иногда вы получаете неопределенное значение, которое может испугать вас. Если вы делаете || 0 в конце вашего селектора значений, он вернет 0, если вы получите неопределенное. Так что ... это хорошо. Попробуйте это.

$(document).ready(function() {
    $(".processPaymentProducts").click(function(){
        var amount;
        $amount = 0;
        $(".processPaymentProducts:checked").each(function() {
            $amount += $(this).next().val() || 0;
            console.log($(this).next().val() || 0);
        });
        if($amount>100) { $amount = $amount/100; } else { $amount = 0; }
        $('#processPaymentAmount').val($amount);
    });
});

Answer 2

Каждое поле в html является «строкой», четные числа в полях будут обрабатываться как строка.

Поэтому вам следует использовать метод parseInt () для перевода строки в целое число, например

,

этот код:

$amount += $(this).next('input').val()

должен быть

$amount += parseInt($(this).next('input').val())

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