jQuery, флажки и .is (": флажок") - PullRequest
       77

jQuery, флажки и .is (": флажок")

84 голосов
/ 18 апреля 2010

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

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

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

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

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

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

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

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

Ответы [ 13 ]

84 голосов
/ 18 апреля 2010
$('#myCheckbox').change(function () {
    if ($(this).prop("checked")) {
        // checked
        return;
    }
    // not checked
});

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

26 голосов
/ 18 апреля 2010

Существует обходной путь, который работает в jQuery 1.3.2 и 1.4.2 :

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

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

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

10 голосов
/ 13 июня 2016

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

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

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

  if ($(this).prop('checked')){
    console.log('checked');
  }
});
4 голосов
/ 05 сентября 2012

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

$("#myCheckbox").click( function() {
    var that = this;
    setTimeout(function(){
        alert($(that).is(":checked"));
    });
});
2 голосов
/ 28 февраля 2017
  $("#checkbox").change(function(e) {

  if ($(this).prop('checked')){
    console.log('checked');
  }
});
2 голосов
/ 21 августа 2015
<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");
}
});
2 голосов
/ 21 июня 2012

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

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

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

А вот как я справляюсь с этим в обработчике события щелчка флажка. Функция-обработчик проверяет наличие объекта 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.

0 голосов
/ 23 января 2019
$("#personal").click(function() {
      if ($(this).is(":checked")) {
            alert('Personal');
        /* var validator = $("#register_france").validate(); 
        validator.resetForm(); */
      }
            }
            );

JSFIDDLE

0 голосов
/ 01 июля 2014
$( "#checkbox" ).change(function() {
    if($(this).is(":checked")){
        alert('hi');
    }

});
0 голосов
/ 20 мая 2014

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

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

$el[0].checked;

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

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

...