¿Cómo manejar el cambio de casilla de verificación usando jQuery?


106

Tengo un código

<input type="checkbox" id="chk" value="value" />
<label for="chk">Value </label>
<br/>
<input type="button" id="But1" value="set value" />
<br />
<input type="button" id="But2" value="read checked" />

javascript:

$(document).ready(function () {
    console.log("Ready ...");
    registerHandlers();

    function registerHandlers() {
        $('#But1').click(function () {
            $('#chk').prop('checked', !$('#chk').is(':checked'));
        });
        $('#But2').click(function () {
            var chk1 = $('#chk').is(':checked');
            console.log("Value : " + chk1);
        });

        $('input[type="checkbox"]').change(function () {
            var name = $(this).val();
            var check = $(this).prop('checked');
            console.log("Change: " + name + " to " + check);
        });
    }
});

¿Cómo manejar el cambio de casilla de verificación usando jQuery? Necesito poner el controlador para cambiar las casillas de verificación marcadas.

[actualizar]

Hay una casilla de verificación y algunos botones. Cada botón puede cambiar la casilla de verificación. ¿Cómo detectar un evento cambiando la casilla de verificación?

[Actualizar]

Necesito manejar la casilla de verificación de cambio en este ejemplo jsfiddle . Cuando hago clic en el cuadro, no se muestra el botón de mensaje "Aceptar".


¿Realmente no entiendo tu problema? ¿Qué se supone que debe suceder cuando se cambia una casilla de verificación?
Niklas

¿Cuál es el problema? Este código parece funcionar bien
JaredPar

2
¿Podría reformular su pregunta? Ya tienes $ ('input [type = "checkbox"]'). Cambia de controlador, ¿qué pasa?
Madman

Si cambia el cambio casilla botón de eventos no ocurren
BILL

3
FYI; $('#chk').prop('checked')devuelve un valor booleano en lugar del valor del atributo. Ver api.jquery.com/prop
Stefan

Respuestas:


163

Usar :checkboxselector:

$(':checkbox').change(function() {

        // do stuff here. It will fire on any checkbox change

}); 

Código: http://jsfiddle.net/s6fe9/


75
... y this.checkedes muy útil para determinar si la casilla de verificación está marcada o no.
Stefan

1
¿Es posible registrar varios controladores?
BILL

1
¿Sigue siendo recomendado en 2015?
Eugen Sunic

2
No parece que la API haya cambiado, así que sí.
Samich

esto debe estar dentro de $ (document) .ready (function () ... para mí, ¿es correcto?
kaya

67

También puede usar la identificación del campo

$('#checkbox1').change(function() {
   if($(this).is(":checked")) {
      //'checked' event code
      return;
   }
   //'unchecked' event code
});

17

Espero que esto sea de alguna ayuda.

$('input[type=checkbox]').change(function () {
    if ($(this).prop("checked")) {
        //do the stuff that you would do when 'checked'

        return;
    }
    //Here do the stuff you want to do when 'unchecked'
});

6
a partir de jQuery 1.6, es mejor usar $ (this) .prop ("marcado"), ya que cambiará dinámicamente con el estado real de la casilla de verificación.
hrabinowitz

3
.attr ("marcado") no es correcto porque no se actualiza cuando el usuario hace clic. Confirmo el comentario de @ hrabinowitz.
Adrien

7
$("input[type=checkbox]").on("change", function() { 

    if (this.checked) {

      //do your stuff

     }
});

1
Comprueba que tu propio código funciona antes de publicarlo. Hay un problema evidente con sus selectores ...
Jonathan

live () está en desuso.
guettli

4
$('#myForm').on('change', 'input[type=checkbox]', function() {
    this.checked ? this.value = 'apple' : this.value = 'pineapple';
});

3
Elabore su respuesta: es más probable que las soluciones de solo código se eliminen, porque no explican, solo corrigen (si las hay).
rekaszeru

Lo siento @rekaszeru, lo haré mejor la próxima vez
Everton ZP

0

Me parece que removeProp no funciona correctamente en Chrome: jsfiddle

        $('#badBut1').click(function () {
        checkit('Before');
        if( $('#chk').prop('checked') )
        {
          $('#chk').removeProp('checked');
        }else{
            $('#chk').prop('checked', true);
        }
        checkit('After');
    });
    $('#But1').click(function () {
        checkit('Before');
        if( $('#chk').prop('checked') )
        {
          $('#chk').removeClass('checked').prop('checked',false);
        }else{
            $('#chk').addClass('checked').prop('checked', true);
        }
        checkit('After');
    });

    $('#But2').click(function () {
        var chk1 = $('#chk').is(':checked');
        console.log("Value : " + chk1);
    });

    $('#chk').on( 'change',function () {
        checkit('Result');
    });
    function checkit(moment) {
        var chk1 = $('#chk').is(':checked');
        console.log(moment+", value = " + chk1);
    };

Cómo alternar una casilla de verificación sin evento (desde el exterior): jsfiddle.net/k91k0sLu/1
laurent belloeil

0

obtener valor de radio por nombre

  $('input').on('className', function(event){
        console.log($(this).attr('name'));
        if($(this).attr('name') == "worker")
            {
                resetAll();                 
            }
    });
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.