Перевірте, чи не встановлено прапорець при натисканні - jQuery


86

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

За допомогою jQuery я легко можу дізнатись, перевірено це чи ні:

$('#check1').click(function() {
    if($(this).is(':checked'))
        alert('checked');
    else
        alert('unchecked');
});

Але я насправді хочу лише мати оператор if, який перевіряє, чи не встановлено прапорець.

Тож я думав, що можу зробити це за допомогою наступного коду:

$('#check2').click(function() {
    if($(this).not(':checked'))
        alert('unchecked');
    else
        alert('checked');
});

Але це завжди відображатиме повідомлення "не позначене". Не зовсім те, що я очікував ...

демонстрація: http://jsfiddle.net/tVM5H/

Тож врешті-решт мені потрібно щось на зразок:

$('#check2').click(function() {
    if($(this).not(':checked')) {
        // Got unchecked, so something!!!
    }
});

Але, очевидно, це не працює. Я радше не хочу використовувати перший приклад, тому що тоді я мав би непотрібний оператор "else", коли мені потрібен лише один оператор "if".

Отже, перше, це помилка jQuery? Тому що для мене це несподівана поведінка. А по-друге, хтось шукає хорошу альтернативу?

Відповіді:



50

Вже розміщена відповідь спрацює. Якщо ви хочете використовувати jQuery: not, ви можете зробити це:

if ($(this).is(':not(:checked)'))

або

if ($(this).attr('checked') == false)

Перший приклад у цій відповіді здається найпростішим для прочитання з усіх варіантів, тому я голосую за це.
Тобі 1 Кенобі,

5

jQuery перевірити на перевірене? Справді?

if(!this.checked) {

Не використовуйте базуку для виконання роботи бритви.


4
Якщо для пошуку елемента використовується jQuery, його слід прочитати$(this)[0].checked
Кріс,

@HoldOffHunger Це частина власного вхідного елемента: developer.mozilla.org/en-US/docs/Web/HTML/Element/input/… Якщо ви використовуєте jQuery, тоді у коментарі над вашим Chris є правильним синтаксисом.
TheZ

@TheZ: Приємно! Так, ти маєш рацію, відповідь Кріса - це добре. Пропозиція: Додати його, щоб відповісти кредитно? Як OP, так і найпопулярніші відповіді схиляються до $ (selector) .is ('...'), що є чистим рішенням jQuery. Тільки використання .checkedтам, де вони є .is('checked'), не буде працювати само по собі.
HoldOffHunger

5
$(document).ready(function() {
        $("#check1").click(function() {
            var checked = $(this).is(':checked');
            if (checked) {
                alert('checked');
            } else {
                alert('unchecked');
            }
        });
    });


2

Ознайомтеся з деякими відповідями на це запитання - я думаю, це може стосуватися і вашого:

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

Я думаю, ви стикаєтесь з невідповідністю в реалізації onclickфункції браузером . Деякі вирішують перемикати прапорець до запуску події, а деякі після.


Це насправді теж дуже важливо.
TheZ

І тому jQuery перевірити на перевірене. Дійсно. ;)
JoeBrockhaus

1

Відповідь вже розміщено. Але ми також можемо використовувати jquery таким чином

демо

$(function(){
    $('#check1').click(function() {
        if($('#check1').attr('checked'))
            alert('checked');
        else
            alert('unchecked');
    });

    $('#check2').click(function() {
        if(!$('#check2').attr('checked'))
            alert('unchecked');
        else
            alert('checked');
    });
});

0

Робіть це так

if (typeof $(this).attr("checked") == "undefined" )

// To check if checkbox is checked
if( $(this).attr("checked")=="checked")

Це може бути просто так this.checked. Перший рядок там не потрібен typeof(він ніколи не підніме a ReferencError). Ви також повинні використовувати prop()замість attr(), який поверне логічне значення, роблячи ваш другий також зайвим.
alex
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.