JQuery, флажки и .is( ": checked" )

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

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

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

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

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

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

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

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

ОТВЕТЫ

Ответ 1

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

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

Ответ 2

Существует работа, которая работает в jQuery 1.3.2 и 1.4.2:

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

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

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

Ответ 3

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

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

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

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

Ответ 4

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

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

Ответ 5

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

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

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

И вот как я обрабатываю это в обработчике события checkbox. Функция обработчика проверяет наличие в качестве второго параметра объекта nonUI. (Первый параметр всегда является самим событием.) Если параметр присутствует и установлен в 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.

Ответ 6

<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");
}
});

Ответ 7

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

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

Ответ 8

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

http://jsbin.com/uwupa/edit

По существу, вместо привязки события "click" вы связываете событие "change" с предупреждением.

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

Ответ 9

В дополнение к ответу Nick Craver, для правильной работы на 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, хотя.

Ответ 10

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

});

Ответ 11

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

JSFIDDLE

Ответ 12

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

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

$el[0].checked;

$el - элемент jquery выбора.

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

Ответ 13

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

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