Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
 
1 / 1 / 1
Регистрация: 12.06.2015
Сообщений: 48
1

Как отследить нажатие checkbox на iphone?

28.07.2019, 21:07. Показов 466. Ответов 2
Метки html (Все метки)

Всем привет! Прошу помощи..
Есть скрипт для стилизации чекбокса с помощью псевдоэлементов. На ПК и андроид работает все норм. На айфоне ситуация такая: если тапнуть один раз, класс присвоился, галочка появилась, но сам инпут не получил атрибут checked. Если тапнуть еще раз по этому же элементу, галочка пропадает, но инпуту присваивается checked.

Если click заменить на touchenter, то инпут получает checked, но присвоение класса не проиходит. Если использовать совместно с клик, получается даблклик, что тоже не дает нужного результата. Структуру изменить не могу, генерируется из БД.
Как это исправить не прибегая к тяжелым библиотекам? В чем ошибка?

Структура
HTML5
1
<label class="checkbox-inline"><input type="checkbox" class="rsform-checkbox">Дополнительный цокольный ввод</label>
Скрипт
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$('label.checkbox-inline').each(function(){
        var checkbox = $(this).find('input[type=checkbox]');
        if(checkbox.prop("checked")) {
            $(this).addClass("active-checkbox");
        }
    });
 
    $('label.checkbox-inline').on('click', function(){
        var checkbox = $(this).find('input[type=checkbox]');
        if(checkbox.prop("checked")){
            $(this).removeClass("active-checkbox");
            checkbox.prop("checked", false);
        }else{
            $(this).addClass("active-checkbox");
            checkbox.prop("checked", true);
        }
    });
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
28.07.2019, 21:07
Ответы с готовыми решениями:

Как отследить нажатие пользователя на ссылку?
Господа, подскажите пожалуйста, как отследить нажатие на ссылку. Нужно чтобы страничка открывалась,...

OnBeforeUnload: как отследить нажатие кнопки Stay on this Page?
Привет всем. У меня такая проблема, нужно отследить нажатие кнопки &quot;leave this page&quot; или &quot;stay on...

Выбрать все checkbox при нажатие на главном checkbox
Не могу никак реализовать, допустим как это сделано на почтах или как mail.ru. При выборе главного...

Checkbox iphone
Подскажите пожалуйста, как сделать так, чтобы например, чекбокс включен выдавало сообщение...

__________________

Записывайтесь на профессиональные курсы Fullstack-разработчиков на JavaScript‌
Обучение в Java Mentor с оплатой после трудоустройства
2
1726 / 987 / 432
Регистрация: 12.05.2016
Сообщений: 2,466
29.07.2019, 08:36 2
zahar_92, посмотрите в сторону .change(). Зачем отслеживать клики, если input обернут в label.
0
1 / 1 / 1
Регистрация: 12.06.2015
Сообщений: 48
29.07.2019, 11:13  [ТС] 3
Благодарю за ответ. Вот решение. Спасибо Malleys

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<label class="checkbox-inline"><input type="checkbox" class="rsform-checkbox">Дополнительный цокольный ввод</label>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
    
    $("label.checkbox-inline input[type=checkbox]").on("change", function() {
        var checkbox = $(this);
        checkbox
            .closest("label.checkbox-inline")
            .toggleClass("active-checkbox", checkbox.prop("checked"));
    });
    
</script>
 
<style>
    
    .active-checkbox {
        background: yellowgreen;
    }
    
</style>
Или второй вариант, используя состояние :checked

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<label class="checkbox-inline"><input type="checkbox" class="rsform-checkbox">Дополнительный цокольный ввод</label>
 
<style>
    
input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background: linear-gradient(#474749, #606062);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15), inset 0 -1px 1px rgba(0, 0, 0, 0.15);
    outline: none;
    vertical-align: -6px;
}
 
input[type="checkbox"]:checked {
    background: url('data:image/svg+xml,\
        <svg xmlns="http://www.w3.org/2000/svg" \
            width="10px" height="10px" viewBox="0 0 10 10" \
            stroke="%23fff" stroke-width="1.3" stroke-linecap="round" \
            stroke-linejoin="round" fill="none"\
        >\
            <polyline points="2.3 5.1 4.2 7.2 8.0 2.2"></polyline>\
        </svg>')
        no-repeat center center / contain
        deeppink;
}
    
</style>
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
29.07.2019, 11:13

Заказываю контрольные, курсовые, дипломные работы и диссертации здесь.

Отследить нажатие по <datalist>
Через аякс при наборе символов подгружаю города в &lt;datalist&gt; Нужно при нажатие на 1 из элементов...

Отследить нажатие на конкретное изображение
Всем привет! Выводятся изображения из Базы Данных. Например так: &lt;a href =...

Xpath и нажатие на checkbox и radiobutton
Добрый вечер! Пытаюсь сделать check\checked на чекбоксе и радиобатоне при помощи JS и Xpath, но...

Как отследить нажатие кнопки?
Приветик, всем!!!! Помогите, пожалуйста, мне надо отследить нажатие на кнопку на другой форме,а на...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.