Kontrolliertes Änderungsereignis eines Kontrollkästchens abfangen

125

Wie kann ich das Ereignis zum Überprüfen / Deaktivieren <input type="checkbox" />mit jQuery abfangen ?

jquery unchecked

— Oh mein Gott
quelle

1

Wenn Sie eine relativ neue Version von JQuery verwenden, würde ich die .on ('change', function () {...}) verwenden, wie in der Antwort von @Daniel De Leon unten erwähnt. Ein Vorteil ist, dass der Ereignis-Listener "on" an dynamisch generiertes HTML gebunden wird.

— BLang

172

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

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

Bearbeiten: Dies wird nicht erfasst, wenn sich das Kontrollkästchen aus anderen Gründen als einem Klick ändert, z. B. über die Tastatur. Um dieses Problem zu vermeiden, hören Sie changestatt click.

Informationen zum programmgesteuerten Aktivieren / Deaktivieren finden Sie unter Warum wird mein Kontrollkästchen-Änderungsereignis nicht ausgelöst?

— marcgg
quelle

document.getElementById ('etwas'). geprüft funktioniert, warum $ ('# etwas'). geprüft funktioniert nicht?

— Omg

In Ihrem Code fehlt ein Paran, und Sie sollten wirklich die jQuery-Methode verwenden, um den Prüfstatus abzurufen.

— Pete Michaud

2

Shore: Der Grund, warum getElementById funktioniert, ist, dass es ein DOM-Element zurückgibt, während die Funktion $ jQuery ein jQuery-Objekt zurückgibt. Das jQuery-Objekt hat das DOM-Element als Eigenschaft, ist jedoch selbst kein DOM-Objekt.

— Pete Michaud

3

Ich weiß, dass ich zu spät zur Party komme, aber dies funktioniert nur, wenn ein "Klick" -Ereignis dies auslöst. Wenn Sie aus irgendeinem Grund an einer anderen Stelle im Code so etwas tun würden: $ ("# etwas"). Attr ("geprüft", "geprüft"), würde das Klickereignis niemals ausgelöst.

— David Stinemetze

3

@ DavidStinemetze: Ich würde sagen, dass Sie Ton hören könnten, changeanstatt zu klicken. Ich aktualisiere die Antwort

— Marcgg

44

Der Klick wirkt sich auf eine Beschriftung aus, wenn eine an das Eingabe-Kontrollkästchen angehängt ist.

Ich denke, dass es besser ist, die .change () -Funktion zu verwenden

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

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

— Dídac Rios
quelle

1

Dies sollte die akzeptierte Antwort sein, da es bei der Frage darum geht, auf ein Überprüfungsereignis zu warten, nicht auf ein Klickereignis.

— Jessica

26

Verwenden Sie den Selected: Selected, um den Status des Kontrollkästchens zu bestimmen:

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

— karim79
quelle

13

Für JQuery 1.7+ verwenden Sie:

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

— Daniel De León
quelle

4

Verwenden Sie dazu das folgende Code-Snippet:

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

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

Oder Sie können dasselbe mit einem einzigen Kontrollkästchen tun:

$('#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'); 
  }
});

Für die Demo: http://jsfiddle.net/creativegala/hTtxe/

— Arun Kumar
quelle

3

Nach meiner Erfahrung musste ich das aktuelle Ziel der Veranstaltung nutzen:

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

— Brandon Aaskov
quelle

3

Dieser Code macht, was Sie brauchen:

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

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

Sie können es auch auf jsfiddle überprüfen

— Deepak Saini
quelle

2

Verwenden Sie das Klickereignis, um die beste Kompatibilität mit MSIE zu erzielen

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

— Ty W.
quelle

Wie kann man beurteilen, ob es aktiviert ist oder nicht?

— Omg

Ich muss wissen, ob ein Klick das Aktivieren oder Deaktivieren bedeutet.

— Omg

1

Sie können dann $ (this) .is (': checked') verwenden, um den Status des gerade angeklickten Elements zu testen

— 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
quelle

15

Hey! Kumpel, was machst du hier?

— Omg

Sieht aus wie eine Bereichsauswahl (dh überprüfen Sie das erste Element, halten Sie die Umschalttaste gedrückt, überprüfen Sie das letzte; und alle dazwischen sind aktiviert.) Dies ist jedoch viel mehr, als die Frage verlangt. Es fehlt jedoch ein Code wie checkUncheckAll ().

— Joel und