Cattura l'evento di modifica selezionato di una casella di controllo

125

Come posso catturare l'evento di controllo / deselezione di <input type="checkbox" />con jQuery?

jquery unchecked

— Oh mio Dio
fonte

1

Se stai utilizzando una versione relativamente nuova di JQuery, utilizzerei il .on ('change', function () {...}) come menzionato nella risposta di @Daniel De Leon di seguito. Un vantaggio, il listener di eventi "on" si legherà all'html generato dinamicamente.

— BLang

172

<input type="checkbox" id="something" />

$("#something").click( function(){
   if( $(this).is(':checked') ) alert("checked");
});

Modifica: questa operazione non verrà rilevata quando la casella di controllo cambia per motivi diversi da un clic, come l'utilizzo della tastiera. Per evitare questo problema, ascolta changeinvece di click.

Per selezionare / deselezionare a livello di programmazione, dai un'occhiata a Perché il mio evento di modifica della casella di controllo non viene attivato?

— marcgg
fonte

document.getElementById ('qualcosa'). controllato funziona, perché $ ('# qualcosa'). controllato non funziona?

— omg

Nel tuo codice manca un paran e dovresti davvero usare il modo jQuery per ottenere lo stato di controllo.

— Pete Michaud,

2

Shore: il motivo per cui getElementById funziona è che restituisce un elemento DOM, mentre la funzione $ jQuery restituisce un oggetto jQuery. L'oggetto jQuery ha l'elemento DOM come proprietà, ma non è di per sé un oggetto DOM.

— Pete Michaud,

3

So di arrivare in ritardo alla festa, ma funziona solo quando viene attivato da un evento "clic". Se per qualche motivo dovessi fare qualcosa di simile altrove nel codice: $ ("# qualcosa"). Attr ("verificato", "verificato") l'evento click non verrebbe mai attivato.

— David Stinemetze

3

@DavidStinemetze: direi che potresti ascoltare ton changeinvece di fare clic. Sto aggiornando la risposta

— marcgg

44

Il clic influenzerà un'etichetta se ne abbiamo una allegata alla casella di controllo di input?

Penso che sia meglio usare la funzione .change ()

<input type="checkbox" id="something" />

$("#something").change( function(){
  alert("state changed");
});

— Dídac Rios
fonte

1

Questa dovrebbe essere la risposta accettata, poiché la domanda riguarda l'ascolto di un evento di controllo, non un evento di clic.

— Jessica

26

Utilizzare il selettore : verificato per determinare lo stato della casella di controllo:

$('input[type=checkbox]').click(function() {
    if($(this).is(':checked')) {
        ...
    } else {
        ...
    }
});

— karim79
fonte

13

Per JQuery 1.7+ utilizzare:

$('input[type=checkbox]').on('change', function() {
  ...
});

— Daniel De León
fonte

4

Usa lo snippet di codice di seguito per ottenere questo:

$('#checkAll').click(function(){
  $("#checkboxes input").attr('checked','checked');
});

$('#UncheckAll').click(function(){
  $("#checkboxes input").attr('checked',false);
});

Oppure puoi fare lo stesso con una singola casella di controllo:

$('#checkAll').click(function(e) {
  if($('#checkAll').attr('checked') == 'checked') {
    $("#checkboxes input").attr('checked','checked');
    $('#checkAll').val('off');
  } else {
    $("#checkboxes input").attr('checked', false);
    $('#checkAll').val('on'); 
  }
});

Per la demo: http://jsfiddle.net/creativegala/hTtxe/

— Arun Kumar
fonte

3

Nella mia esperienza, ho dovuto sfruttare l'attuale Target dell'evento:

$("#dingus").click( function (event) {
   if ($(event.currentTarget).is(':checked')) {
     //checkbox is checked
   }
});

— Brandon Aaskov
fonte

3

Questo codice fa ciò di cui hai bisogno:

<input type="checkbox" id="check" >check it</input>

$("#check").change( function(){
   if( $(this).is(':checked') ) {
        alert("checked");
    }else{
        alert("unchecked");
   }
});

Inoltre, puoi controllarlo su jsfiddle

— Deepak saini
fonte

2

usa l'evento click per una migliore compatibilità con MSIE

$(document).ready(function() {
    $("input[type=checkbox]").click(function() {
        alert("state changed");
    });
});

— Ty W
fonte

Come giudicare se è stato controllato o meno?

— omg

Ho bisogno di sapere se un clic significa selezionarlo o deselezionarlo.

— omg

1

puoi quindi usare $ (this) .is (': checks') per testare lo stato dell'elemento appena cliccato

— Ty W,

-1

$(document).ready(function(){
    checkUncheckAll("#select_all","[name='check_boxes[]']");
});

var NUM_BOXES = 10;
// last checkbox the user clicked
var last = -1;
function check(event) {
  // in IE, the event object is a property of the window object
  // in Mozilla, event object is passed to event handlers as a parameter
  event = event || window.event;

  var num = parseInt(/box\[(\d+)\]/.exec(this.name)[1]);
  if (event.shiftKey && last != -1) {
    var di = num > last ? 1 : -1;
    for (var i = last; i != num; i += di)
      document.forms.boxes['box[' + i + ']'].checked = true;
  }
  last = num;
}
function init() {
  for (var i = 0; i < NUM_BOXES; i++)
    document.forms.boxes['box[' + i + ']'].onclick = check;
}

HTML:

<body onload="init()">
  <form name="boxes">
    <input name="box[0]" type="checkbox">
    <input name="box[1]" type="checkbox">
    <input name="box[2]" type="checkbox">
    <input name="box[3]" type="checkbox">
    <input name="box[4]" type="checkbox">
    <input name="box[5]" type="checkbox">
    <input name="box[6]" type="checkbox">
    <input name="box[7]" type="checkbox">
    <input name="box[8]" type="checkbox">
    <input name="box[9]" type="checkbox">
  </form>
</body>

— santosh
fonte

15

Ehi, amico, cosa ci fai qui?

— omg

Sembra una selezione di intervallo (cioè, controlla il primo elemento, tieni premuto il tasto Maiusc, controlla l'ultimo; e tutti quelli compresi tra sono controllati). Tuttavia, questo è molto più di quanto la domanda chiede. Manca del codice però, come checkUncheckAll ().

— joelsand