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>
4 respuestas
¡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
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.
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>
Si desea que z se use globalmente, la variable global se declara fuera de la función
Preguntas relacionadas
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.