jQuery, прапорці та .is (“: перевірено”)


88

Коли я прив'язую функцію до елемента прапорця, наприклад:

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

Прапорець змінює перевірений атрибут перед активацією події, це нормальна поведінка і дає зворотний результат.

Однак коли я це роблю:

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

Прапорець змінює перевірений атрибут після активації події.

Моє питання полягає в тому, чи є спосіб викликати подію клацання з jQuery, як це робить звичайний клік (перший сценарій)?

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


5
Я щойно перевірив це. Ви цілком праві. Але це , здається , що це може бути помилка. Я б підняв його як помилку з jQuery і подивився,
cletus

1
А як щодо події "зміни"?
ZippyV,

@cletus Дійсно, це помилка Jquery 1.4.2. 1.3.2 працює чудово.
Бен,

Я бачу однакову поведінку як в 1.4.2, так і в 1.3.2: jsfiddle.net/HCUNn
Нік Кравер

@Nick Він все ще робить протилежне тому, що робив би звичайний клацання миші. Я чесно не знаю, чому 1.3.2 працює для мене, а 1.4.2 ні, але все ж це потрібно змінити.
Бен,

Відповіді:


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

Примітка: У старих версіях jquery це було нормально використовувати attr. Тепер пропонується використовуватиprop для читання стану.


1
Я спробував, що "$ (# myCheckbox) .click ()" знімає / встановлює прапорець, але функція зміни ніколи не запускається. Я також спробував змінити атрибут "перевірено" замість того, щоб викликати click () і навіть встановити функцію "змінити" на "live".
Бен,

@Ben - Вам потрібно запустити це по-іншому, щоб змусити це запуститись, див. Мою відповідь щодо оператора тригера.
Нік Кравер

@ Нік Дякую, я прийму відповідь tcurdt, оскільки він першим запропонував рішення. Нерозумно, я не ініціював метод "зміни".
Бен,

19
а для новіших версій jquery функція prop ("перевірена") замість attr ("перевірена") на випадок, якщо хтось інший виявить.
данський

Я б уникав "опори" через не зворотну сумісність, особливо. в IE.
vapcguy

27

Існує обхід, який працює в jQuery 1.3.2 та 1.4.2 :

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

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

Але я згоден, така поведінка здається глючною порівняно з рідною подією.


10

Станом на червень 2016 року (з використанням jquery 2.1.4) жодне з інших запропонованих рішень не працює. Перевірка attr('checked')завжди повертається undefinedі is('checked)завжди повертаєтьсяfalse .

Просто використовуйте метод prop:

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

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

2
is('checked)поверне false, оскільки "перевірено" не є псевдоселектором CSS. Правильним має бути is(':checked')такий, щоб він замість цього шукав ": перевірено".
dhaupin

4

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

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

Так! Трохи нетопічно, але мені довелося зробити те саме в сітках Kendo із прапорцями, коли хтось натискав "Додати новий запис", якщо я хотів, щоб він був "Активним" за замовчуванням. Я повинен був також дати йому час 500ms. Потім я повинен був додати .click(), потім встановити .attr('value', 'true'), потім .change(), потім, .blur()перш ніж це буде програмно встановити поле, коли я натиснув кнопку «Оновити» програмно ....
vapcguy

2

Якщо ви передбачаєте цю досить небажану поведінку, тоді один навколо неї буде передавати додатковий параметр з jQuery.trigger () обробнику кліків прапорця. Цей додатковий параметр повідомляє обробник клацань про те, що клацання було ініційовано програмно, а не користувачем, який безпосередньо клацає на самому прапорці. Потім обробник клацання прапорця може інвертувати звітний статус перевірки.

Отже, ось як я запускаю подію клацання на прапорці з ідентифікатором "myCheckBox". Зверніть увагу, що я також передаю параметр об'єкта з одним членом, nonUI, який має значення true:

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

І ось як я це обробляю в обробнику подій кліку прапорця. Функція обробника перевіряє наявність об'єкта nonUI як його другий параметр. (Першим параметром завжди є сама подія.) Якщо параметр присутній і встановлений у значення true, я інвертую зареєстрований статус. Якщо такий параметр не передано - чого не буде, якщо користувач просто натиснув прапорець в інтерфейсі користувача, - тоді я повідомляю про фактичний перевірений статус:

$("#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.


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

Деякі коментарі були б непоганими
Даніл Гапонов



0

Ну, щоб відповідати першому сценарію, це те, що я придумав.

http://jsbin.com/uwupa/edit

По суті, замість прив'язки події "клацання" ви прив'язуєте подію "зміни" за допомогою попередження.

Потім, коли ви запускаєте подію, спочатку ви запускаєте клацання, а потім запускаєте зміну.


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хоча.


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

});

1
Будь ласка, згадайте деякі деталі
CodeWarrior

Здається, це просто повторна відповідь, що використовує changeзамість операційних програм click, і просто використовує ifтвердження як інший спосіб тестування :checked.
vapcguy

-1

Найшвидший і найпростіший спосіб :

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

$el[0].checked;

$ el - це елемент виділення jquery.

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


Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.