¿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".

CUENTA
fuente
¿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/

Samich
fuente
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
});
Pinkesh Sharma
fuente
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'
});
Lokesh Yadav
fuente
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

     }
});
Arjun
fuente
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';
});
Everton ZP
fuente
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);
    };
laurent belloeil
fuente
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();                 
            }
    });
Siva Anand
fuente