Casilla de verificación Javascript onChange


130

Tengo una casilla de verificación en un formulario y me gustaría que funcione de acuerdo con el siguiente escenario:

  • si alguien lo verifica, el valor de un campo de texto ( totalCost) debe establecerse en 10.
  • luego, si vuelvo y lo desactivo, una función calculate()establece el valor de totalCostacuerdo con otros parámetros en el formulario.

Básicamente, necesito la parte donde, cuando marco la casilla de verificación, hago una cosa y cuando la desmarco, hago otra.


Checkboxid.Checked == true / false {Escribe tu evento}.
Naresh

Respuestas:


150
function calc()
{
  if (document.getElementById('xxx').checked) 
  {
      document.getElementById('totalCost').value = 10;
  } else {
      calculate();
  }
}

HTML

<input type="checkbox" id="xxx" name="xxx" onclick="calc();"/>

30
¿Y si el usuario usa el teclado?
thomthom

66
Aquí hay un JsFiddle donde se pueden probar todas las diferentes formas: clic, teclado, etiqueta y tecla de acceso. Todos desencadenan el evento en Firefox.
Roman Starkov

44
Desafortunadamente, el evento no se activa cuando el estado de la casilla de verificación se cambia a través de JavaScript.
StanE

2
jajaja, usa esto desde javascript $ ('# casilla de verificación'). attr ('marcado', 'marcado'); $ ('# casilla de verificación'). haga clic en ();
Senad Meškin

55
En su lugar, debe usar onchange, está específicamente diseñado para el caso de uso del OP. (gracias ReeCube a continuación por el enlace) developer.mozilla.org/en-US/docs/Web/Events/change
Armando

90

JavaScript puro:

const checkbox = document.getElementById('myCheckbox')

checkbox.addEventListener('change', (event) => {
  if (event.target.checked) {
    alert('checked');
  } else {
    alert('not checked');
  }
})
My Checkbox: <input id="myCheckbox" type="checkbox" />


28

Si está utilizando jQuery ... entonces puedo sugerir lo siguiente: NOTA: Hice algunas suposiciones aquí

$('#my_checkbox').click(function(){
    if($(this).is(':checked')){
        $('input[name="totalCost"]').val(10);
    } else {
        calculate();
    }
});

19

Use un evento onclick, porque cada clic en una casilla de verificación en realidad lo cambia.


29
¿Qué pasa si el usuario usa el teclado?
thomthom

14
Es extraño, pero sigue siendo un clic
SergeS

66
De hecho, el clic funciona, incluso se activa cuando utiliza una etiqueta para alternar la casilla de verificación. ¡Pero debería usar mejor el evento 'cambio'! El evento 'change' está destinado a esto: developer.mozilla.org/en-US/docs/Web/Events/change
ReeCube

¿Qué pasa con el doble clic?
Chalky

44
Bueno, eso son dos clics ahora, ¿no?
Rohmer

13

La siguiente solución hace uso de jquery. Supongamos que tiene una casilla de verificación con id de checkboxId.

const checkbox = $("#checkboxId");

checkbox.change(function(event) {
    var checkbox = event.target;
    if (checkbox.checked) {
        //Checkbox has been checked
    } else {
        //Checkbox has been unchecked
    }
});

4

HTML:

<input type="checkbox" onchange="handleChange(event)">

JS:

function handleChange(e) {
     const {checked} = e.target;
}

3

Haga referencia a la casilla de verificación por su id y no con el # Asigne la función al atributo onclick en lugar de usar el atributo change

var checkbox = $("save_" + fieldName);
checkbox.onclick = function(event) {
    var checkbox = event.target;

    if (checkbox.checked) {
        //Checkbox has been checked
    } else {
        //Checkbox has been unchecked
    }
};

1

Sé que esto parece una respuesta novata, pero lo estoy poniendo aquí para que pueda ayudar a otros en el futuro.

Supongamos que está construyendo una mesa con un bucle foreach. Y al mismo tiempo agregando casillas de verificación al final.

<!-- Begin Loop-->
<tr>
 <td><?=$criteria?></td>
 <td><?=$indicator?></td>
 <td><?=$target?></td>
 <td>
   <div class="form-check">
    <input type="checkbox" class="form-check-input" name="active" value="<?=$id?>" <?=$status?'checked':''?>> 
<!-- mark as 'checked' if checkbox was selected on a previous save -->
   </div>
 </td>
</tr>
<!-- End of Loop -->

Coloca un botón debajo de la tabla con una entrada oculta:

<form method="post" action="/goalobj-review" id="goalobj">

 <!-- we retrieve saved checkboxes & concatenate them into a string separated by commas.i.e. $saved_data = "1,2,3"; -->

 <input type="hidden" name="result" id="selected" value="<?= $saved_data ?>>
 <button type="submit" class="btn btn-info" form="goalobj">Submit Changes</button>
</form>

Puedes escribir tu guión así:

<script type="text/javascript">
    var checkboxes = document.getElementsByClassName('form-check-input');
    var i;
    var tid = setInterval(function () {
        if (document.readyState !== "complete") {
            return;
        }
        clearInterval(tid);
    for(i=0;i<checkboxes.length;i++){
        checkboxes[i].addEventListener('click',checkBoxValue);
    }
    },100);

    function checkBoxValue(event) {
        var selected = document.querySelector("input[id=selected]");
        var result = 0;
        if(this.checked) {

            if(selected.value.length > 0) {
                result = selected.value + "," + this.value;
                document.querySelector("input[id=selected]").value = result;
            } else {
                result = this.value;
                document.querySelector("input[id=selected]").value = result;
            }
        }
        if(! this.checked) { 

// trigger if unchecked. if checkbox is marked as 'checked' from a previous saved is deselected, this will also remove its corresponding value from our hidden input.

            var compact = selected.value.split(","); // split string into array
            var index = compact.indexOf(this.value); // return index of our selected checkbox
            compact.splice(index,1); // removes 1 item at specified index
            var newValue = compact.join(",") // returns a new string
            document.querySelector("input[id=selected]").value = newValue;
        }

    }
</script>

Los identificadores de sus casillas de verificación se enviarán como una cadena "1,2" dentro de la variable de resultado. Luego puede dividirlo en el nivel del controlador como lo desee.


0

Javascript

  // on toggle method
  // to check status of checkbox
  function onToggle() {
    // check if checkbox is checked
    if (document.querySelector('#my-checkbox').checked) {
      // if checked
      console.log('checked');
    } else {
      // if unchecked
      console.log('unchecked');
    }
  }

HTML

<input id="my-checkbox" type="checkbox" onclick="onToggle()">


0

tratar

totalCost.value = checkbox.checked ? 10 : calculate();

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.