Home / Questions / 50794
Accepted
ByGroxD
Asked: 2020-02-22 09:09:06 +0800 CST 2020-02-22 09:09:06 +0800 CST

复选框和文本输入的总和 实时

  • 772

我需要使用复选框类型输入添加文本类型输入，此时单击复选框时，它正在添加并显示总数，但我还需要它添加称为服务价格的文本类型输入。

这是我的表格的截图：

我的表格

这是我的代码：

<?php foreach($servicelist as $listsv): ?>
<input name="service[]" type="checkbox" onClick="if (this.checked) sumar(<?php echo $listsv["price"]; ?>); else restar(<?php echo $listsv["price"]; ?>)" value='<?php echo $listsv["id"]; ?>'><?php echo utf8_encode($listsv['service']); ?><br>
<?php endforeach; ?>
<br>

这是我的功能

var total = 0;

function sumar(valor) {
    total += valor;
    document.formulario.total.value = '$' + total.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
}

function restar(valor) {
    total -= valor;
    document.formulario.total.value = '$' + total.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
}

function otro_servicio() {
    $("#lineas").append('<label>Nombre Servicio</label>');
    $("#lineas").append('<input name="othersv" type="text" class="form-control importe_linea" placeholder="Nombre del servicio extra"/><br/>');
    $("#lineas").append('<label>Precio Servicio</label>');
    $("#lineas").append('<input name="price" type="text" class="form-control importe_linea" placeholder="Precio del servicio"/><br/>');
}

为了实现这个目标，我可以使用 javascript、jquery 或 angular。

javascript

3 Answers

  1. Best Answer

    您可以将复选框元素的价格保存为这些元素的属性，然后将侦听器添加到复选框的单击和输入的键位。

    $(document).ready(function() {
 
 $(document).on('click keyup','.mis-checkboxes,.mis-adicionales',function() {
   calcular();
 });

});

function calcular() {
  var tot = $('#total');
  tot.val(0);
  $('.mis-checkboxes,.mis-adicionales').each(function() {
    if($(this).hasClass('mis-checkboxes')) {
      tot.val(($(this).is(':checked') ? parseFloat($(this).attr('tu-attr-precio')) : 0) + parseFloat(tot.val()));  
    }
    else {
      tot.val(parseFloat(tot.val()) + (isNaN(parseFloat($(this).val())) ? 0 : parseFloat($(this).val())));
    }
  });
  var totalParts = parseFloat(tot.val()).toFixed(2).split('.');
  tot.val('$' + totalParts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",") + '.' +  (totalParts.length > 1 ? totalParts[1] : '00'));  
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><input type="checkbox" tu-attr-precio="3.5" class="mis-checkboxes" /> Elemento #1</li>
  <li><input type="checkbox" tu-attr-precio="7.5" class="mis-checkboxes" /> Elemento #2</li>
  <li><input type="checkbox" tu-attr-precio="5.5" class="mis-checkboxes" /> Elemento #3</li>
  <li><input type="checkbox" tu-attr-precio="4.5" class="mis-checkboxes" /> Elemento #4</li>
</ul>

<label><strong>Servicio adicional</strong><label>
<div>
  <input type="text" class="mis-adicionales" placeholder="Precio del servicio"/>
</div>

<label><strong>Total</strong><label>
<div>
  <input id="total" type="text" placeholder="0.00"/>
</div>

    • 7

  2. 您可以使用这样的 jquery/javascript 函数。

    function Sumar() {
    var div = $('#RegistroServicio');
    var divSumar = $(div).find('[name$="price"]');
    var Total = 0;
    var temp = 0;
    for (var i = 0; i < divSumar.length; i++) {

        var Monto = parseFloat(divSumar[i].value).toFixed(2);
        if (Monto === 'NaN') {
            Monto = 0;
        }
        Total = parseFloat(parseFloat(Total) + parseFloat(Monto)).toFixed(2);

    }
    $('#suma').val(Total);
}

    您可以在所有价格输入的 onclick 事件中添加该功能

    $("#lineas").append('<input name="price" type="text" class="form-control importe_linea" placeholder="Precio del servicio" onclick="Sumar()"/><br/>');

    并且服务价格输入可以取总的结果

    <label>Precio del servicio</label>
<input id="suma" name="Total" type="text" value="0" />

    我希望并为您服务:)

    • 1

  3. 如果您想使用 javascript，这可能是一个选项：

    以下代码的作用是这样描述的：

    每次状态CheckBox变化时，它都会检查当前存在的 sum 的值，如果选中，则将检查的值添加到一般 sum 中，否则，从检查中减去该值。

    这是代码：

    function actualizarValor(estaChequeado, valor) {

  // Variables.
  var suma_actual = 0;
  var campo_resultado = document.getElementById('txtValor');
  valor = parseInt(valor);

  // Obtener la suma que pueda tener el campo 'txtValor'.
  try {
    if (campo_resultado != null) {

      if (isNaN(campo_resultado.value)) {
        campo_resultado.value = 0;
      }

      suma_actual = parseInt(campo_resultado.value);
    }
  } catch (ex) {
    alert('No existe el campo de la suma.');
  }

  // Determinar que: si el check está seleccionado "checked"
  // entonces, agregue el valor a la variable "suma_actual";
  // de lo contrario, le resta el valor del check a "suma_actual".
  if (estaChequeado == true) {
    suma_actual = suma_actual + valor;
  } else {
    suma_actual = suma_actual - valor;
  }

  // Colocar el resultado de las operaciones anteriores de vuelta
  // al campo "txtValor".
  campo_resultado.value = suma_actual;
}
    <div>
  <input type="checkbox" id="chk_1" value="1" onclick="actualizarValor(this.checked, this.value);" /> <span>CheckBox #1</span>
</div>
<div>
  <input type="checkbox" id="chk_2" value="2" onclick="actualizarValor(this.checked, this.value);" /> <span>CheckBox #2</span>
</div>
<div>
  <input type="checkbox" id="chk_3" value="3" onclick="actualizarValor(this.checked, this.value);" /> <span>CheckBox #3</span>
</div>
<div>
  <input type="checkbox" id="chk_4" value="4" onclick="actualizarValor(this.checked, this.value);" /> <span>CheckBox #4</span>
</div>

<div>
  <i>El resultado es </i><input type="text" readonly id="txtValor" value="0" />
</div>

    • 1