Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.07.2019, 21:08
Интересующийся
Отправить личное сообщение для zahar_92 Посмотреть профиль Найти все сообщения от zahar_92
 
Регистрация: 13.05.2016
Сообщений: 18

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

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

Структура
<label class="checkbox-inline"><input type="checkbox" class="rsform-checkbox">Дополнительный цокольный ввод</label>


Скрипт
$('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);
        }
    });
Ответить с цитированием
  #2 (permalink)  
Старый 29.07.2019, 08:08
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от zahar_92
На ПК и андроид работает все норм
Не работает, если нажать на саму галочку!

Сообщение от zahar_92
Структуру изменить не могу
А зачем её менять? Она у вас идеальна!

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

<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>

Последний раз редактировалось Malleys, 29.07.2019 в 08:32.
Ответить с цитированием
  #3 (permalink)  
Старый 29.07.2019, 11:01
Интересующийся
Отправить личное сообщение для zahar_92 Посмотреть профиль Найти все сообщения от zahar_92
 
Регистрация: 13.05.2016
Сообщений: 18

Дорогой ты мой человек! Все заработало, спасибо!
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как убрать у одного checkbox checked и присвоить тому на который кликнула nina_ Элементы интерфейса 4 14.11.2016 13:27
Как на выбраной фотографии при помощи jQuery добавить checkbox? Dmitriy78781 jQuery 1 16.04.2013 15:29
как отследить нажатие символьных клавишь Louis Общие вопросы Javascript 1 28.10.2009 10:47
Управление как в IPhone Alerto Элементы интерфейса 16 29.06.2009 10:13
как отделить нажатие символьных клавиш от функциональных? Kos Events/DOM/Window 50 03.10.2008 12:08