jQuery, флажки и .is («: проверено»)

Когда я привязываю функцию к элементу флажка, например:

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

Флажок изменяет свой атрибут checked до того, как событие запускается, это нормальное поведение и дает обратный результат.

Однако когда я это сделаю:

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

Флажок изменяет свой отмеченный атрибут после срабатывания события.

Мой вопрос: есть ли способ вызвать событие щелчка из jQuery, как это делает обычный щелчок (первый сценарий)?

PS: Я уже пробовал trigger('click');

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

Примечание. В старых версиях jquery его можно было использовать attr. Теперь предлагается использоватьprop для чтения состояния.

В jQuery 1.3.2 и 1.4.2 есть обходной путь :

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

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

Но я согласен, такое поведение кажется ошибочным по сравнению с исходным событием.

По состоянию на июнь 2016 года (с использованием jquery 2.1.4) ни одно из других предлагаемых решений не работает. Проверка attr('checked')всегда возвращается undefinedи is('checked)всегда возвращается false.

Просто используйте метод prop:

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

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

Я все еще испытываю такое поведение с jQuery 1.7.2. Простой обходной путь - отложить выполнение обработчика кликов с помощью setTimeout и позволить браузеру тем временем творить чудеса:

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

Если вы ожидаете этого довольно нежелательного поведения, то одним из возможных вариантов будет передача дополнительного параметра из jQuery.trigger () обработчику кликов флажка. Этот дополнительный параметр предназначен для уведомления обработчика кликов о том, что щелчок был инициирован программно, а не пользователем, непосредственно устанавливающим флажок. Затем обработчик щелчка флажка может инвертировать отчетный статус проверки.

Итак, вот как я бы инициировал событие click для флажка с идентификатором myCheckBox. Обратите внимание, что я также передаю параметр объекта с одним членом, nonUI, для которого установлено значение true:

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

И вот как я обрабатываю это в обработчике события щелчка флажка. Функция обработчика проверяет наличие объекта, отличного от пользовательского интерфейса, в качестве второго параметра. (Первым параметром всегда является само событие.) Если параметр присутствует и установлен в значение true, я инвертирую сообщаемый статус .checked. Если такой параметр не передается - чего не будет, если пользователь просто щелкнет флажок в пользовательском интерфейсе - я сообщаю фактический статус .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);
    });

Версия JSFiddle на http://jsfiddle.net/BrownieBoy/h5mDZ/

Я тестировал Chrome, Firefox и 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

Что ж, чтобы соответствовать первому сценарию, это то, что я придумал.

http://jsbin.com/uwupa/edit

По сути, вместо того, чтобы связывать событие «щелчок», вы связываете событие «изменение» с предупреждением.

Затем, когда вы запускаете событие, сначала вы запускаете щелчок, а затем запускаете изменение.

В дополнение к ответу Ника Крейвера, чтобы это работало правильно, IE 8вам необходимо добавить дополнительный обработчик кликов в флажок:

// 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');

В противном случае обратный вызов будет срабатывать только тогда, когда флажок теряет фокус, поскольку IE 8сохраняет фокус на флажках и радиомодулях при их нажатии.

_{IE 9Хотя еще не тестировал .}

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

});

Самый быстрый и простой способ :

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

$el[0].checked;

$ el - элемент выделения jquery.

Наслаждайтесь!

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

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