Fangen Sie überprüft Änderung bei einer Checkbox

StackOverflow https://stackoverflow.com/questions/1455223

  •  12-09-2019
  •  | 
  •  

Frage

Wie kann ich fangen aktivieren / deaktivieren Fall <input type="checkbox" /> mit jQuery?

War es hilfreich?

Lösung 

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

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

Edit: Dadurch wird nicht fangen, wenn das Kontrollkästchen aus anderen Gründen als einem Klick ändert sich, wie die Tastatur. Zur Vermeidung dieses Problems, hören von change clickinstead.

Für die Überprüfung / unchecking programmatisch, werfen Sie einen Blick auf Warum nicht mein Checkbox Änderungsereignis ausgelöst?

Andere Tipps

Der Klick wird ein Etikett beeinflussen, wenn wir einen mit dem Eingang Checkbox angeschlossen haben?

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

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

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

Mit der ausgewählt Selektor das Kontrollkästchen des Zustand bestimmen: 

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

Für JQuery 1.7+ Verwendung: 

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

Verwenden Sie die folgenden Code-Schnipsel, dies zu erreichen. 

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

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

Sie können auch das gleiche mit einzelnen 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'); 
  }
});

Demo: http://jsfiddle.net/creativegala/hTtxe/

Nach meiner Erfahrung, ich habe die Veranstaltungs-current nutzen: 

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

verwendet das Click-Ereignis für die beste Kompatibilität mit MSIE 

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

Dieser Code tut, was Ihre Notwendigkeit: 

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

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

Auch Sie können es auf jsfiddle 

$(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>
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top