¿Cómo reducir y agregar valor de un elemento diferente después de marcar y desmarcar usando la casilla de verificación en javascript?

Question

Cuando lo verifico, puedo agregar algunos valores en solo 1 elemento, pero no sé cómo agregar desde un elemento diferente y reducirlo.

var y = 1;

function calc() {
  if (document.getElementById("t1").checked) {
    document.getElementById("demo").innerHTML = z = y + 1;
    if (document.getElementById("t1").reversed) {
      document.getElementById("demo").innerHTML = z = y - 1;
    }
  }
  if (document.getElementById("t2").checked) {
    document.getElementById("demo").innerHTML = z = y + 1;
    if (document.getElementById("t2").reversed) {
      document.getElementById("demo").innerHTML = z = y - 1;
    }
  }
}

<input id="t1" type="checkbox" name="model" value="a1" onclick="calc();">a1
<input id="t2" type="checkbox" name="model" value="a1" onclick="calc();">a2
<h1 id="demo"></h1>

javascript html

0

Ihsan 6 oct. 2019 a las 18:26

Answer 1

¡Entendido! ¿Te refieres a esto?

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<input id="t1" type="checkbox" name="model" value="a1" onclick="calc(this);">a1
<input id="t2" type="checkbox" name="model" value="a1" onclick="calc(this);">a2
<h1 id="demo">0</h1>

<script>
var y = 1;
var z=0;

function calc(e) {
	if(e.checked)
    	z = z + 1;
    else
    	z = z - 1;
	document.getElementById("demo").innerText = z;
}
</script>

</body>
</html>

Use algo como if(!e.checked) si desea marcar la casilla de verificación no está marcada y if(e.checked) está marcada, el símbolo ! es algo importante: D

También he agregado this a su evento haciendo clic en cada elemento de entrada para obtener un elemento objetivo más rápido al hacer clic.

<input id="t1" type="checkbox" name="model" value="a1" onclick="calc(this);">a1

0

Tinh Linh 6 oct. 2019 a las 16:14

Answer 2

Aquí hay otro enfoque sin ninguna variable. El recuento se restablece cada vez que se hace clic en una casilla de verificación:

const qs=s=>document.querySelector(s),
  qsa=s=>document.querySelectorAll(s);

qs("body").addEventListener("click",ev=>ev.target.name==='model'
  ? qs('#demo').innerText=qsa('input:checked').length
  : 0);

<input id="t1" type="checkbox" name="model" value="a1">a1
<input id="t2" type="checkbox" name="model" value="a2">a2
<h1 id="demo">0</h1>

Definí qs() y qsa() como funciones de acceso directo para mejorar la legibilidad del código.

0

cars10m 6 oct. 2019 a las 16:47

Answer 3

Con un contador . Aumenta o disminuye el valor. Asigne el valor a innerHTML del elemento de salida.

const demo = document.getElementById("demo");

let makeCounter = function() {
  let privateCounter = 0;

  function changeBy(val) {
    privateCounter += val;
  }

  return {
    value: function() {
      return privateCounter;
    },
    increment: function() {
      changeBy(1);
    },
    decrement: function() {
      changeBy(-1);
    }
  }
};

let myCounter = makeCounter();

function changeValue(el) {
  el.checked ? myCounter.increment() : myCounter.decrement();
  demo.innerHTML = myCounter.value();
}

<input id="t1" type="checkbox" name="model" value="a1" onclick="changeValue(this);">a1
<input id="t2" type="checkbox" name="model" value="a1" onclick="changeValue(this);">a2
<h1 id="demo"></h1>

0

Sun 6 oct. 2019 a las 16:25

Answer 4

Si desea que z se use globalmente, la variable global se declara fuera de la función

0

Shlomi Lachmish 6 oct. 2019 a las 16:02

¿Cómo reducir y agregar valor de un elemento diferente después de marcar y desmarcar usando la casilla de verificación en javascript?

4 respuestas

Nuevas preguntas

javascript