jQuery, pola wyboru i .is („: zaznaczone”)

Kiedy wiążę funkcję z elementem pola wyboru, takim jak:

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

Pole wyboru zmienia swój atrybut zaznaczony przed wyzwoleniem zdarzenia. Jest to normalne zachowanie i daje odwrotny wynik.

Jednak kiedy to robię:

$("#myCheckbox").click();

Pole wyboru zmienia atrybut zaznaczenia po wyzwoleniu zdarzenia.

Moje pytanie brzmi: czy istnieje sposób na wywołanie zdarzenia kliknięcia z jQuery tak, jak zrobiłoby to normalne kliknięcie (pierwszy scenariusz)?

PS: już próbowałem trigger('click');

$('#myCheckbox').change(function () {
    if ($(this).prop("checked")) {
        // checked
        return;
    }
    // not checked
});

Uwaga: w starszych wersjach jquery można było go używać attr. Teraz sugeruje się użycieprop do odczytania stanu.

Istnieje obejście, które działa w jQuery 1.3.2 i 1.4.2 :

$("#myCheckbox").change( function() {
    alert($(this).is(":checked"));
});

//Trigger by:
$("#myCheckbox").trigger('click').trigger('change');​​​​​​​​​​​​​

Ale zgadzam się, to zachowanie wydaje się błędne w porównaniu z rodzimym wydarzeniem.

Od czerwca 2016 r. (Przy użyciu jquery 2.1.4) żadne inne sugerowane rozwiązania nie działają. Sprawdzanie attr('checked')zawsze wraca undefinedi is('checked)zawsze wraca false.

Po prostu użyj metody prop:

$("#checkbox").change(function(e) {

  if ($(this).prop('checked')){
    console.log('checked');
  }
});

Nadal doświadczam tego zachowania z jQuery 1.7.2. Prostym obejściem jest odroczenie wykonania procedury obsługi kliknięcia za pomocą setTimeout i pozwolenie przeglądarce na wykonanie swojej magii w międzyczasie:

$("#myCheckbox").click( function() {
    var that = this;
    setTimeout(function(){
        alert($(that).is(":checked"));
    });
});

Jeśli spodziewasz się tego raczej niepożądanego zachowania, jednym z rozwiązań byłoby przekazanie dodatkowego parametru z jQuery.trigger () do modułu obsługi kliknięcia pola wyboru. Ten dodatkowy parametr służy do powiadamiania modułu obsługi kliknięcia, że ​​kliknięcie zostało uruchomione programowo, a nie przez bezpośrednie kliknięcie pola wyboru przez użytkownika. Moduł obsługi kliknięcia pola wyboru może następnie odwrócić zgłoszony stan sprawdzenia.

Oto jak wywołać zdarzenie kliknięcia pola wyboru o identyfikatorze „myCheckBox”. Zauważ, że przekazuję również parametr obiektu z pojedynczym składnikiem, nonUI, który jest ustawiony na true:

$("#myCheckbox").trigger('click', {nonUI : true})

A oto jak sobie z tym radzę w module obsługi zdarzeń kliknięcia pola wyboru. Funkcja obsługi sprawdza obecność obiektu nonUI jako drugiego parametru. (Pierwszym parametrem jest zawsze samo zdarzenie). Jeśli parametr jest obecny i ma wartość true, odwracam zgłoszony stan .checked. Jeśli nie zostanie przekazany żaden taki parametr - czego nie będzie, jeśli użytkownik po prostu kliknie pole wyboru w interfejsie użytkownika - zgłaszam rzeczywisty stan .checked:

$("#myCheckbox").click(function(e, parameters) {
   var nonUI = false;
        try {
            nonUI = parameters.nonUI;
        } catch (e) {}
        var checked = nonUI ? !this.checked : this.checked;
        alert('Checked = ' + checked);
    });

Wersja JSFiddle na http://jsfiddle.net/BrownieBoy/h5mDZ/

Testowałem z Chrome, Firefox i IE 8.

<input id="widget-wpb_widget-3-custom_date" class="mycheck" type="checkbox" value="d/M/y" name="widget-wpb_widget[3][custom_date]" unchecked="true">    

var atrib = $('.mycheck').attr("unchecked",true);
$('.mycheck').click(function(){
if ($(this).is(":checked")) 
{
$('.mycheck').attr("unchecked",false);
   alert("checkbox checked");
}
else
{
$('.mycheck').attr("unchecked",true);
 alert("checkbox unchecked");
}
});

  $("#checkbox").change(function(e) {

  if ($(this).prop('checked')){
    console.log('checked');
  }
});

$("#personal").click(function() {
      if ($(this).is(":checked")) {
            alert('Personal');
        /* var validator = $("#register_france").validate(); 
        validator.resetForm(); */
      }
            }
            );

JSFIDDLE

Cóż, aby dopasować się do pierwszego scenariusza, to jest coś, co wymyśliłem.

http://jsbin.com/uwupa/edit

Zasadniczo zamiast wiązać zdarzenie „kliknięcie”, należy powiązać zdarzenie „zmiana” z alertem.

Następnie wyzwalając zdarzenie, najpierw uruchamiasz kliknięcie, a potem zmianę.

Oprócz odpowiedzi Nicka Cravera, aby to działało poprawnie IE 8, musisz dodać dodatkowy moduł obsługi kliknięć do pola wyboru:

// needed for IE 8 compatibility
if ($.browser.msie)
    $("#myCheckbox").click(function() { $(this).trigger('change'); });

$("#myCheckbox").change( function() {
    alert($(this).is(":checked"));
});

//Trigger by:
$("#myCheckbox").trigger('click').trigger('change');

W przeciwnym razie wywołanie zwrotne zostanie uruchomione tylko wtedy, gdy pole wyboru straci fokus, ponieważ IE 8po ich kliknięciu pozostaje skupiony na polach wyboru i radiach.

_{IE 9Jednak nie testowałem .}

$( "#checkbox" ).change(function() {
    if($(this).is(":checked")){
        alert('hi');
    }

});

Najszybszy i najłatwiejszy sposób :

$('#myCheckbox').change(function(){
    alert(this.checked);
});

$el[0].checked;

$ el - jest elementem selekcji jquery.

Cieszyć się!

if ($.browser.msie) {
    $("#myCheckbox").click(function() { $(this).trigger('change'); });
}

$("#myCheckbox").change(function() {
        alert($(this).is(":checked"));
    });