Проверка, когда флажок поворачивается

ProgramBox

Проверка, когда флажок поворачивается

Post author:admin
Запись опубликована:20 августа, 2022
Post category:Вопросы по программированию

#jquery

#jquery ( jquery )

Вопрос:

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

Поэтому я использую .change событие для запуска всего, но .prop перед запуском функции проверьте использование, чтобы убедиться, что флажок действительно установлен или снят, верно?

 <form>
  <input class="target" type="checkbox" value="Field 1">
</form>

$(".target").change( function(){
    if(this.prop("checked", true)){
        alert("this is checked");
    } else {
        alert("this is not checked");
    }
});

Приведенный выше код не работает, и я не уверен, почему…

Я выбрал .target , и он вызывает прослушиватель .change событий.

.target это this потому, что он вызывает .change метод.

Итак, функция говорит: «при .target изменении проверьте, является ли свойство «checked» .target истинным. Если это так, насторожитесь. Еще, предупредите что-нибудь еще «.

В документации jQuery к .change нему говорится: «Событие изменения отправляется элементу при изменении его значения«. Ценность, о которой они говорят, не .val относится к элементу, верно? Совершенно другая «ценность». Из .val .target -за того, что никогда, никогда ничего не меняется, так как на данный момент это жестко запрограммировано.

Ответ №1:

Самый простой способ — использовать $(this).is(":checked") для обработки if или else, например:

 $(".target").change( function(){
    if($(this).is(":checked")){
        alert("this is checked");
    } else {
        alert("this is not checked");
    }
});

Поскольку вам нужно проверить, установлен ли флажок, не устанавливайте значение checked . И this вам не нужно .prop() использовать объект Jquery $(this) .

ЖИВАЯ ДЕМОНСТРАЦИЯ

Редактировать

Я был немного не прав в отношении производительности .is() vs .prop() после тестирования, это .prop() намного быстрее, чем .is() .

Оба дадут нам тот же результат, но .is() медленнее.

 $(".target").change( function(){
        if($(this).prop(":checked")){
            alert("this is checked");
        } else {
            alert("this is not checked");
        }
    });

Или намного быстрее:

 $(".target").change( function(){
            if(this.checked){
                alert("this is checked");
            } else {
                alert("this is not checked");
            }
        });

Проверка производительности .is() против .prop()

1. Есть ли недостатки в использовании .prop("checked" === true) по сравнению с использованием .is(":checked") ? Кстати, что : делать в этом контексте? Я знаю, что : это используется для определенного селектора jQuery и в основном является расширением jQuery ie. что-то, определенное самим jQuery. Но :checked это не селектор, и он ничего не выбирает, так что означает двоеточие?

2. Кажется, я не могу найти документацию о плюсах и минусах псевдоселектора? api.jquery.com/checked-selector

3. О да, и я думаю, что для использования .prop требуется, чтобы jQuery выполнял поиск по всем свойствам выбранного вами объекта DOM. Ему нужно дождаться создания объекта DOM браузером, а затем ему необходимо выполнить поиск в объекте DOM для свойства checked и вернуть, нашел он его или нет. Звучит примерно так?

4. Да, вы правы, with .is() использует для фильтрации напрямую, если установлен флажок или нет, ему все равно, какой-либо другой реквизит или attr. В любом случае я использую .prop, чтобы установить или узнать какую-то опору, нет, чтобы проверить, выбран или отмечен.

5. Если вы хотите, то, как я опубликовал «Оба дадут нам одинаковый результат, но .is() работает медленнее» , только я поставил тест, чтобы уточнить производительность.

Ответ №2:

В настоящее время вы пытаетесь вызвать метод prop для элемента (который не существует, потому что он не является объектом jQuery). Вам нужно, чтобы он проверял значение, а не устанавливал его. Изменить this.prop("checked", true) на $(this).is(':checked')

Ответ №3:

Вы используете установочную версию prop , иначе вы указываете, что флажок должен быть checked . Вы должны использовать версию getter prop .

 if($(this).prop('checked') === true){
    alert("this is checked");
} else {
    alert("this is not checked");
}

Редактировать: мой плохой, опоздал здесь и просто уверен в неправильном использовании prop. Обновлена ссылка на this.

или

 if(this.checked === true) { ...

Ответ №4:

Попробуйте это :

Демонстрация http://jsfiddle.net/kb3xa /

 $(document).ready(function () {
     $(".target").click(function () {
     if ($(".target").is(":checked")) {
         alert("this is checked");
        }
         else{
          alert("this is not checked");
        }
     });
});

Метки: когда флажок поворачивается, Проверка