Złap zdarzenie zmiany zaznaczonego pola wyboru

125

Jak złapać zdarzenie check / uncheck <input type="checkbox" />z jQuery?

jquery unchecked

— o mój Boże
źródło

1

Jeśli używasz stosunkowo nowej wersji JQuery, użyłbym .on ('change', function () {...}), jak wspomniano w odpowiedzi @Daniel De Leon poniżej. Zaletą jest to, że odbiornik zdarzeń „włączony” będzie wiązał się z dynamicznie generowanym kodem HTML.

— BLang

172

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

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

Edycja: wykonanie tej czynności nie zostanie złapane, gdy pole wyboru zmieni się z innych powodów niż kliknięcie, na przykład przy użyciu klawiatury. Aby uniknąć tego problemu, słuchaj changezamiast click.

Aby programowo zaznaczyć / usunąć zaznaczenie, zapoznaj się z tematem Dlaczego moje zdarzenie zmiany pola wyboru nie jest wyzwalane?

— marcgg
źródło

document.getElementById ('coś'). zaznaczone działa, dlaczego $ ('# coś'). zaznaczone nie działa?

— omg

W Twoim kodzie brakuje paranu i naprawdę powinien używać metody jQuery do uzyskiwania stanu sprawdzenia.

— Pete Michaud

2

Shore: powodem, dla którego getElementById działa, jest to, że zwraca element DOM, podczas gdy funkcja $ jQuery zwraca obiekt jQuery. Obiekt jQuery ma element DOM jako właściwość, ale sam w sobie nie jest obiektem DOM.

— Pete Michaud

3

Wiem, że spóźniam się na imprezę, ale to działa tylko wtedy, gdy wywoła to zdarzenie „kliknięcia”. Jeśli z jakiegoś powodu zrobiłbyś coś takiego w innym miejscu w kodzie: $ ("# coś"). Attr ("zaznaczone", "zaznaczone") zdarzenie kliknięcia nigdy nie zostanie wywołane.

— David Stinemetze

3

@DavidStinemetze: Powiedziałbym, że changezamiast klikać , można słuchać dużo . Aktualizuję odpowiedź

— marcgg

44

Kliknięcie wpłynie na etykietę, jeśli mamy jedną dołączoną do pola wyboru wejściowego?

Myślę, że lepiej jest użyć funkcji .change ()

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

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

— Dídac Rios
źródło

1

To powinna być akceptowana odpowiedź, ponieważ pytanie dotyczy nasłuchiwania zdarzenia czeku, a nie zdarzenia kliknięcia.

— Jessica

26

Użyj selektora : selected, aby określić stan pola wyboru:

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

— karim79
źródło

13

Dla JQuery 1.7+ użyj:

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

— Daniel De León
źródło

4

Aby to osiągnąć, użyj poniższego fragmentu kodu .:

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

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

Lub możesz zrobić to samo z pojedynczym polem wyboru:

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

Wersja demonstracyjna: http://jsfiddle.net/creativegala/hTtxe/

— Arun Kumar
źródło

3

Z mojego doświadczenia wynika, że musiałem wykorzystać currentTarget wydarzenia:

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

— Brandon Aaskov
źródło

3

Ten kod spełnia Twoje potrzeby:

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

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

Możesz również sprawdzić to na jsfiddle

— Deepak saini
źródło

2

użyj zdarzenia kliknięcia, aby uzyskać najlepszą zgodność z MSIE

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

— Ty W
źródło

Jak ocenić, czy jest sprawdzony, czy nie?

— omg

Muszę wiedzieć, czy kliknięcie oznacza zaznaczenie lub odznaczenie.

— omg

1

możesz następnie użyć $ (this) .is (': Checked'), aby przetestować stan właśnie klikniętego elementu

— 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
źródło

15

Hej, stary, co tu robisz?

— omg,

Wygląda na wybór zakresu (tj. Sprawdź pierwszą pozycję, przytrzymaj klawisz Shift, zaznacz ostatnią; a wszystkie pomiędzy nimi są zaznaczone). Jednak to znacznie więcej niż to, o co chodzi. Brakuje jednak jakiegoś kodu, takiego jak checkUncheckAll ().

— joelsand