Sumar el valor de un input number y el valor de N numero de checkboxes, javascript

Stack Overflow en español Asked by Raul Escalona on November 13, 2021

Quiero sumar los valores de un input con nombre monto_pagar y el valor de multiples checkboxes (el número de checkbox generados va de 1 a N) y mostrarlos en el input con nombre total_id.

Mi problema ocurre cuando el número de checkbox es mayor que 1, solo suma el ultimo checkbox generado. Supongo que el problema está en la forma en que obtengo el valor del ID cambiante.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<?php
    $precio=100000;
    $i = 1;
    $cuotas_pendientes=4; //Si el valor es a 1 me funciona correctamente, pero cuando es mayor de 1 es donde comienza el problema
?>
<form name="formulario">
     <label>Abono</label>
     <input type="number" name="monto_pagar" placeholder="Monto a abonar" onKeyUp="operacion()">
     <br>
     <?php while ($i <= $cuotas_pendientes) { 
        $id = "id_cuota".$i; ?>
        <!--EN CADA ITERACION CAMBIO EL NOMBRE DEL CHECKBOX Y DEL ID-->
        <input name="checkbox<?php echo $i; ?>" type="checkbox" onClick="operacion()" id="<?php echo $id; ?>">
        <label for="<?php echo $id; ?>"><?php echo "Cuota ".$i.": ".$precio?></label>
        <br>  
        <!--He colocado la funcion dentro del WHILE ya que el ID va cambiando en cada iteracion-->
        <!--Lo intente poner despues de la funcion y obtengo el mismo resultado no deseado-->
        <script type="text/javascript">
        function operacion() {
            caja = document.forms["formulario"].elements;
            var numero1 = Number(caja["monto_pagar"].value);

            $("#<?php echo $id; ?>").on('change', function(){
                this.value = this.checked ? <?php echo $precio; ?> : 0;
            }).change();
            var numero2  = Number(caja["checkbox<?php echo $i; ?>"].value);

            caja["total_id"].value = parseInt(numero1)+parseInt(numero2);
        }
    </script>
    <?php  $i++; } ?>

    <label>TOTAL</label>
    <input type="text" name="total_id" placeholder="0">
</form>

javascript jquery php

2 Answers

pero aun no me funciona. aqui te dejo el codigo como quedo siguiendo tus instrucciones... ahora no me suma ningun dato.

No esta demas decir que deseo sumar el input name="monto" y los checkbox... y luego reflejar el resultado en el input name="total_id"

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<?php
$precio=100000;
$i = 1;
$cuotas_pendientes=4;
?>
<form name="formulario">
<label>Abono</label>
<input id="montoTotal" type="number" name="monto_pagar" placeholder="Monto a abonar">
 <br>
  <?php while ($i <= $cuotas_pendientes) { 
    $id = "id_cuota".$i; ?>
    <input name="checkbox<?php echo $i; ?>" type="checkbox" class="checkbox" id="<?php echo $id; ?>" value="<?php echo $id; ?>">
    <label for="<?php echo $id; ?>"><?php echo "Cuota ".$i.": ".$precio?></label>
    <br>
    <?php  $i++; } ?>
    <!--Probe colocanco el script antes del formulario y tampoco funciona-->
    <script type="text/javascript">
        $(".checkbox").on('change', function(){
            var suma_checkSeleccionados = 0;
            $.each($("input.checkbox:checked"), function(key, val){
                suma_checkSeleccionados += parseInt($(val).val());
            });
            $("#montoTotal").val(suma_checkSeleccionados);
        });
    </script>
    <label>TOTAL</label>
    <input type="text" name="total_id" placeholder="0" onchange="suma_final()">
</form>

Answered by Raul Escalona on November 13, 2021

Sería mas fácil que hagas lo siguiente, el input de monto total, puedes dejarlo así

<input id="montoTotal" type="number" name="monto_pagar" placeholder="Monto a abonar">

imprime los checkbox de la siguiente manera

<input name="checkbox<?php echo $i; ?>" type="checkbox" class="checkbox" id="<?php echo $id; ?>" value="<?php echo $id; ?>">

remueve el script dentro del while, y coloca este código fuera del while

<script type="text/javascript">
    $(".checkbox").on('change', function(){
        var suma_checkSeleccionados = 0;
        $.each($("input.checkbox:checked"), function(key, val){
            suma_checkSeleccionados += parseInt($(val).val());
        });
        $("#montoTotal").val(suma_checkSeleccionados);
    });
</script>

esta es la versión modificada, se me paso el input del abono

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<?php
$precio=100000;
$i = 1;
$cuotas_pendientes=4;
?>
<form name="formulario">
<label>Abono</label>
<input id="abono" type="number" name="monto_pagar" placeholder="Monto a abonar">
 <br>
  <?php while ($i <= $cuotas_pendientes) { 
    $id = "id_cuota".$i; ?>
    <input name="checkbox<?php echo $i; ?>" type="checkbox" class="checkbox" id="<?php echo $id; ?>" value="<?php echo $i; ?>">
    <label for="<?php echo $id; ?>"><?php echo "Cuota ".$i.": ".$precio?></label>
    <br>
    <?php  $i++; } ?>
    <!--Probe colocanco el script antes del formulario y tampoco funciona-->
    <script type="text/javascript">
    function sumChecks() {
        var suma_checkSeleccionados = 0;
            $.each($("input.checkbox:checked"), function(key, val){
                suma_checkSeleccionados += parseInt($(val).val());
            });
        return suma_checkSeleccionados;
    }
        $(".checkbox").on('change', function(){
            $("#montoTotal").val(parseInt($("#abono").val()) + sumChecks());
        });
    $("#abono").on('change',function(){
        $("#montoTotal").val(parseInt($(this).val()) + sumChecks());
    });
    </script>
    <label>TOTAL</label>
    <input id="montoTotal" type="text" name="total_id" placeholder="0" onchange="suma_final()">
</form>

Answered by Hammerffall BK on November 13, 2021

Add your own answers!

Ask a Question

Get help from others!