1

Tengo la siguiente tabla, al seleccionar el checkbox quiero poder multiplicar la cantidad cambiando el total de esa linea dependiendo del valor del checkbox.

Ejemplo la primera fila tiene una cantidad 2 y el checkbox tiene un múltiplo por 6, al seleccionar el checkbox la linea total quedaria en 12.

function checkbox_multiplo(checkboxElem) {

    if (checkboxElem.checked) {
        alert('Cambiar total');
    } else {
        alert('Resetear total');
    }
}
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

  <table id="mytable" class="table table-bordered text-center table-sm">
      <thead>
          <tr class="table-info">
              <th width="5%">Cantidad</th>
              <th width="5%">Promedio</th>
              <th width="5%">Total</th>
              <th width="3%">&nbsp; </th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>2</td>
              <td>0,50</td>
              <td>2</td>
              <td style="text-align: center; vertical-align: middle;">
                  <div class="custom-control custom-checkbox custom-control-inline">
                      <input type="checkbox" name="Escoge" class="custom-control-input" id="1" onchange="checkbox_multiplo(this)">
                      <label class="custom-control-label" for="1">6</label>
                  </div>
              </td>

          </tr>
          <tr>
              <td>6</td>
              <td>0,50</td>
              <td>6</td>
              <td style="text-align: center; vertical-align: middle;">
                  <div class="custom-control custom-checkbox custom-control-inline">
                      <input type="checkbox" name="Escoge" class="custom-control-input" id="2" onchange="checkbox_multiplo(this)">
                      <label class="custom-control-label" for="2">5</label>
                  </div>
              </td>
          </tr>
      </tbody>
  </table>

Espero haberme explicado bien. Saludos.

2
  • cuál es el resultado qué esperas al hacer reset? Commented el 27 ago. 2019 a las 13:00
  • @ChristianCarrillo la cantidad sola, sin multiplo
    – MoteCL
    Commented el 27 ago. 2019 a las 13:01

2 respuestas 2

1

Sería más adecuado si expresas el contenido de promedio con . y no con ,. La soluciòn sería la siguiente:

function checkbox_multiplo(checkboxElem) {
  // target a los <td> que pertenecen a la misma <tr>
  $tds = $(checkboxElem).closest("tr").find("td");

  // obteniendo el html del primer <td> (cantidad)
  let $cantidad = $($tds[0]).html();
  if (checkboxElem.checked) {    
    // obteniendo el html del segundo <td> (promedio)
    let $promedio = $($tds[1]).html();
    // parseando los valores a float y guardando en $total
    let $total = parseFloat($cantidad) * parseFloat($promedio);
    // asignando al 3er <td> (total) el resultado
    $($tds[2]).html($total);
  } else {
    // asignando al 3er <td> (total) la cantidad
    $($tds[2]).html($cantidad);
  }
}
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

  <table id="mytable" class="table table-bordered text-center table-sm">
      <thead>
          <tr class="table-info">
              <th width="5%">Cantidad</th>
              <th width="5%">Promedio</th>
              <th width="5%">Total</th>
              <th width="3%">&nbsp; </th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>2</td>
              <td>0.50</td>
              <td>2</td>
              <td style="text-align: center; vertical-align: middle;">
                  <div class="custom-control custom-checkbox custom-control-inline">
                      <input type="checkbox" name="Escoge" class="custom-control-input" id="1" onchange="checkbox_multiplo(this)">
                      <label class="custom-control-label" for="1">6</label>
                  </div>
              </td>

          </tr>
          <tr>
              <td>6</td>
              <td>0.50</td>
              <td>6</td>
              <td style="text-align: center; vertical-align: middle;">
                  <div class="custom-control custom-checkbox custom-control-inline">
                      <input type="checkbox" name="Escoge" class="custom-control-input" id="2" onchange="checkbox_multiplo(this)">
                      <label class="custom-control-label" for="2">5</label>
                  </div>
              </td>
          </tr>
      </tbody>
  </table>

2
  • No le explicas nada, solo le pones el codigo y ya, para hacerle los deberes le sirve, pero para nada mas
    – Srsole
    Commented el 27 ago. 2019 a las 13:37
  • Thanks my budda me funciono gracias x este dato $tds = $(checkboxElem).closest("tr").find("td");
    – MoteCL
    Commented el 27 ago. 2019 a las 13:55
0

A tu funcion JS, cuando la llamas en cada input, pasale tambien el valor que quieres multiplicar.

Ademas debes poner un id a todos tus label, recordemos que los id deben ser unicos y no pueden empezar por numero.

Por ejemplo:

onchange="checkbox_multiplo(this, 25)"; //Este 25 me lo invento yo, tu debes de poner el numero que toca. 

Y en la funcion:

function checkbox_multiplo(n, num){
   //calculamos
   var total = n*num;
   //cambiamos el valor
   document.getElementById("MiID").innerHTML= total
}

Esta todo a modo de ejemplo.

Espero que te sirva. Suerte

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.