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

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

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

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

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

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

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

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

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

81 голос | спросил Ben 18 AMpSun, 18 Apr 2010 02:33:45 +040033Sunday 2010, 02:33:45

12 ответов


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

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

ответил tcurdt 18 AMpSun, 18 Apr 2010 02:56:43 +040056Sunday 2010, 02:56:43
0

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

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

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

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

ответил Nick Craver 18 AMpSun, 18 Apr 2010 03:06:50 +040006Sunday 2010, 03:06:50
0

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

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

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

  if ($(this).prop('checked')){
    console.log('checked');
  }
});
ответил atomless 13 J0000006Europe/Moscow 2016, 12:05:43
0

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

$("#myCheckbox").click( function() {
    var that = this;
    setTimeout(function(){
        alert($(that).is(":checked"));
    });
});
ответил Srđan Stanić 5 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowWed, 05 Sep 2012 14:31:31 +0400 2012, 14:31:31
0

Если вы ожидаете такого довольно нежелательного поведения, то одним из способов избежать этого будет передача дополнительного параметра из 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.

ответил ChillyPenguin 21 J0000006Europe/Moscow 2012, 09:41:00
0
<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");
}
});
ответил Tejas Soni 21 PM00000030000001431 2015, 15:50:14
0
  $("#checkbox").change(function(e) {

  if ($(this).prop('checked')){
    console.log('checked');
  }
});
ответил Superman 28 FebruaryEurope/MoscowbTue, 28 Feb 2017 13:52:52 +0300000000pmTue, 28 Feb 2017 13:52:52 +030017 2017, 13:52:52
0

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

http://jsbin.com/uwupa/edit

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

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

ответил RussellUresti 18 AMpSun, 18 Apr 2010 03:04:29 +040004Sunday 2010, 03:04:29
0

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

ответил Yuri Ghensev 4 J0000006Europe/Moscow 2012, 20:30:26
0
$( "#checkbox" ).change(function() {
    if($(this).is(":checked")){
        alert('hi');
    }

});
ответил user3607804 1 J000000Tuesday14 2014, 13:28:12
0

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

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

$el[0].checked;

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

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

ответил Максим К. 20 Maypm14 2014, 15:02:50
0
if ($.browser.msie) {
    $("#myCheckbox").click(function() { $(this).trigger('change'); });
}

$("#myCheckbox").change(function() {
        alert($(this).is(":checked"));
    });
ответил user3239648 27 Jpm1000000pmMon, 27 Jan 2014 12:15:34 +040014 2014, 12:15:34

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132