ocultar - javascript agrega valores checkbox-checked

ocultar campos processmaker

Question

Tengo una sección de casilla de verificación que los usuarios pueden seleccionar para agregar características. Necesito el valor de cada entrada para agregar a una suma que se presentará en la sección # payment-total y # payment-reill. Esencialmente, si seleccionan dos de las casillas de verificación, # payment-total y # payment-rebill serían = 100. Puedo obtener el primer número para agregar / cambiar, pero tengo problemas para cambiar también # payment-reill.

Aquí está mi html:

<section id="extra-features">
<label class="header">Extra Features ($50/month): </label><br><br>
                    <div class="span3">
                    <label class="checkbox" for="Checkbox1">
                        <input value="50" type="checkbox" id="Checkbox1" value="option1" data-toggle="checkbox"> Instagram
                    </label>
                    <label class="checkbox">
                        <input value="50"  type="checkbox" id="Checkbox2" value="option2" data-toggle="checkbox"> Review site monitoring
                    </label>
                    <label class="checkbox">
                        <input value="50"  type="checkbox" id="Checkbox3" value="option3" data-toggle="checkbox"> Google+
                    </label>
                    <label class="checkbox">
                        <input value="50"  type="checkbox" id="Checkbox4" value="option4" data-toggle="checkbox"> LinkedIn
                    </label>
                    </div>
                    <div class="span3">
                    <label class="checkbox">
                        <input value="50"  type="checkbox" id="Checkbox5" value="option5" data-toggle="checkbox"> Pinterest
                    </label>
                    <label class="checkbox">
                        <input value="50"  type="checkbox" id="Checkbox6" value="option6" data-toggle="checkbox"> FourSquare
                    </label>
                    <label class="checkbox">
                        <input value="50"  type="checkbox" id="Checkbox7" value="option7" data-toggle="checkbox"> Tumblr
                    </label>
                    <label class="checkbox">
                        <input value="50"  type="checkbox" id="Checkbox8" value="option8" data-toggle="checkbox"> Advertising
                    </label>
                    </div>
                </section>

<div class="card-charge-info">
                Your card will be charged $<span id="payment-total">0</span> now, and your subscription will bill $<span id="payment-rebill">0</span> every month thereafter. You can cancel or change plans anytime.
            </div>

Mi javascript:

var inputs = document.getElementsByClassName(''sum''),
    total  = document.getElementById(''payment-total'');
    total1 = document.getElementById(''payment-billed'');

 for (var i=0; i < inputs.length; i++) {
    inputs[i].onchange = function() {
        var add = this.value * (this.checked ? 1 : -1);
        total.innerHTML = parseFloat(total.innerHTML) + add
        total1.innerHTML = parseFloat(total1.innerHTML) + add
    }
}

Aquí está mi jsfiddle: http://jsfiddle.net/rynslmns/6NJ8e/10/

Answer 1

Oops! ¡Error de tipografía!

Su segundo lapso se llama pago-refacturación no pago-facturado. Esto funciona

    total1 = document.getElementById(''payment-rebill'');

http://jsfiddle.net/6NJ8e/13/

Answer 2

function updateTotals() {
    var inputs = document.getElementById(''extra-features'').getElementsByTagName(''input'');

    var sum = 0;
    for (var i = 0, num = inputs.length; i < num; i++) {
        if (inputs[i].checked) {
            sum += parseInt(inputs[i].getAttribute(''value''));
        }
    }

    document.getElementById(''payment-total'').innerHTML = sum;
    document.getElementById(''payment-rebill'').innerHTML = sum;
}

var section = document.getElementById(''extra-features'');
var inputs = section.getElementsByTagName(''input'');

for (var i = 0, num = inputs.length; i < num; i++) {
    inputs[i].addEventListener(''change'', updateTotals);
}

JSFiddle: http://jsfiddle.net/6NJ8e/11/

Esto podría escribirse un poco más sucintamente con jQuery (o similar) ya que tiene un poco de DOM, pero no está tan mal sin.

Básicamente, tienes una función que resume todo y actualiza tus campos.

Para hacer esto, necesita obtener todas las entradas. Usé "extra-features" como el ancla ya que era el elemento ID-ed más cercano.

Luego, bucle a través de ellos. Si están marcados, agréguelos a un total y luego actualice sus valores.

Si usó algo que puede hacer selectores similares a CSS, generalmente puede simplemente obtener las entradas marcadas directamente (como $ (''# input de características extra: checked'')) y omitir el condicional.

Luego, solo necesita agregar un evento de cambio a cada entrada que llame a la función updateTotals cada vez que algo cambie.

Un poco más de optimización (dependiendo de su uso exacto), puede almacenar las entradas para un uso posterior para que no tenga que buscarlas cada vez (pero no haga esto si está en el alcance global, solo si esta función se encapsulara de alguna manera).

Answer 3

total1 = document.getElementById(''payment-rebill'');

Obtiene el id ''facturado mediante pago'' y le asigna una copia a var total1. Entonces

total1.innerHTML = parseFloat(total1.innerHTML) + add

Solo cambia el HTML interno de la COPIA que creó hace un segundo. Prueba jQuery:

total1 = parseFloat(total1.innerHTML) + add
$("#payment-rebill").innerHTML(total1);

De esta forma puede hacer los cálculos en la copia y luego reemplazar el innerHTML original con el HTMLHTML interno de la copia.

EDITAR - Para que quede más claro, su código original solo cambiaba el total de la copia local1. No hubo ningún código para actualizar el elemento # payment-reload original.