Estoy haciendo una calculadora y quiero que se asigne un valor específico dependiendo de si la casilla de verificación está marcada o no, el código que tengo podría funcionar, sin embargo, cada vez que hago clic en el botón "Calcular", automáticamente marca la casilla de verificación incluso si no estaba marcado en primer lugar. ¿Cómo arreglaría esto?
function run() { var checkbox = document.getElementById('side1'); if (checkbox.checked = true) { var output = 5; } else { var output = 3; } document.getElementById("totalvalue").innerHTML = output; } <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <title>Document</title> </head> <body> <form> <label for="side1">Side 1</label> <input type="checkbox" id="side1" name="side1"></input> <input type="button" value="Calculate" onclick="run()"></input> <span>Total: $</span> <span id="totalvalue"></span> <script type="text/javascript" src="tek.js"></script> </form> </body> </html>Tienes un error tipográfico en tek.js
Dado que está asignando true a checkbox.checked , establece la casilla de verificación (similar a marcar la casilla de verificación) y 5 se evalúa según su lógica.
Es posible que desee configurar checkbox.checked == true para obtener el resultado deseado.
Actualicé tu código ahora. Está funcionando como se esperaba. Debido a su condición if , se seleccionó su casilla de verificación.
Reemplacé if (checkbox.checked = true) con if (checkbox.checked == true) . Ahora está funcionando.
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> function run() { var checkbox = document.getElementById('side1'); if (checkbox.checked == true) { var output = 5; } else { var output = 3; } document.getElementById("totalvalue").innerHTML = output; } </script> </head> <body> <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <title>Document</title> </head> <body> <form> <label for="side1">Side 1</label> <input type="checkbox" id="side1" name="side1"></input> <input type="button" value="Calculate" onclick="run()"></input> <span>Total: $</span> <span id="totalvalue"></span> <script type="text/javascript" src="tek.js"></script> </form> </body> </html> </body> </html>