jQuery Archives - Космонавт в лодке

Метка: jQuery

Переключение чекбоксов с помощью jQuery – инвертировать checkbox

18.09.2012 от Oleg Abrazhaev·Нет комментариев

Цитируя сайт, откуда я хотел взять решение:

На днях мне нужно было написать небольшую JavaScript функцию (на jQuery), которая переключала бы группу чекбоксов. Т.е. все отмеченные чекбоксы должны были стать неотмеченными и наоборот.

Действительно это наверное распространенная задача переключать checkbox и она как нельзя лучше решается с помощью jQuery.

Предложенный на том сайте метод у меня почему-то не работал.


function toggleAll() {
    var allCheckboxes = $("#checkboxes input:checkbox:enabled");
    var notChecked = allCheckboxes.not(':checked');
    allCheckboxes.removeAttr('checked');
    notChecked.attr('checked', 'checked');
}

function toggleAll() {

var allCheckboxes = $("#checkboxes input:checkbox:enabled");

var notChecked = allCheckboxes.not(':checked');

allCheckboxes.removeAttr('checked');

notChecked.attr('checked', 'checked');

}

Может быть дело в том, что прошло уже 4 года и что-то изменилось в jQuery или в браузерах. Баг был в том, что когда был клик на чекбоксе, то это событие шло впереди события jQuery click и checkbox уже считался отмеченным. Соответсвенно по логике ф-ии сначала выбираются все чекбосы и все не отмеченные. Потом все делаются не отмеченными, а бывшие не отмеченные – отмеченными. Но по клику чекбокс уже считался отмеченным и не попадал в не отмеченные и не отмечался после.

Вот мое работающее решение:


$(".checkboxes input:checkbox:enabled").click(function() {
                        var top = $(this).parent();
                        var allCheckboxes = top.find("input:checkbox:enabled");
                        allCheckboxes.removeAttr('checked');
                        $(this).attr('checked', 'checked');
                });

$(".checkboxes input:checkbox:enabled").click(function() {

var top = $(this).parent();

var allCheckboxes = top.find("input:checkbox:enabled");

allCheckboxes.removeAttr('checked');

$(this).attr('checked', 'checked');

});

В данном случае сначала выбираются все чекбоксы на странице. На них вешается ф-я выполняющаяся по click. По клику на чекбокс (не на div, это важно и это и приводило к багу в примере выше) мы поднимаемся на верхний уровень в div (var top = $(this).parent()). Далее ищем все чекбоксы в текущем div и делаем их не отмеченными, а тот checkbox на который мы нажали – отмеченным.

Мой пример отличается тем, что я делаю отмеченным только нажатый чекбокс. В моем случае их просто всегда было два и надо было переключаться между ними. Чтобы инвертировать все чекбоксы можно дописать ф-ю на основе предыдущего примера:


$(".checkboxes input:checkbox:enabled").click(function() {
                        var top = $(this).parent();
                        var allCheckboxes = top.find("input:checkbox:enabled");
                        var notChecked = allCheckboxes.not(':checked');
                        allCheckboxes.removeAttr('checked');
                        notChecked.attr('checked', 'checked');
                });

$(".checkboxes input:checkbox:enabled").click(function() {

var top = $(this).parent();

var allCheckboxes = top.find("input:checkbox:enabled");

var notChecked = allCheckboxes.not(':checked');

allCheckboxes.removeAttr('checked');

notChecked.attr('checked', 'checked');

});

Должно работать. :)

jQuery confirm плагины – сравнение.

25.05.2012 от Oleg Abrazhaev·Нет комментариев

Сразу напишу, что в jQuery я дилетант. Я понимаю его принципы работы, могу что-то исправить в коде, построить код на основе имеющихся плагинов, понять код – но я не разработчик в этом направлении и вообще не люблю JS. Но вот мне понадобился confirm на jQuery и меня понесло в дебри “готовых” плагинов.

Все оказалось не так просто. Для меня jQuery это удобство. Выбрал элементы, к которым прицепить плагин, залил файлы и оно работает. Но не всегда получается так. Вроде все залил, указал элементы по ид и классам, настроил плагин, залил стили, а нифига не работает.

Для конфирма я рассмотрел 3 плагина и на 3-м мне повезло.

1. Раскрученная и первая страница с англоязычного сайта туториалов, как я понял. Есть ее переводы на русском. У этого чуда нет названия, просто туториал – как создать confirm диалог на jQuery. Вот ссылки:
http://tutorialzine.com/2010/12/better-confirm-box-jquery-css3/
и на русском

У меня это чудо не заработало. Вроде просто и понятно написано, вроде прикрутил все правильно, но в итоге окно с confirm появлялось до нажатия ссылки, сразу по загрузке. В нем были кривые стили и его никак нельзя было убрать. Все сделал по инструкции, что не так? Забил.

2. http://habrahabr.ru/post/48318/ автор представляет тут jquery alert dialogs. При чем ни где, ни в посте, ни в блоге своем не дал ссылку на источник и загрузку. Я ее нашел, вот она:
http://www.abeautifulsite.net/blog/2008/12/jquery-alert-dialogs/

вызывается как-то так, не работает без callback ф-ии.


jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) {
    jAlert('Confirmed: ' + r, 'Confirmation Results');
});

jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) {

jAlert('Confirmed: ' + r, 'Confirmation Results');

});

В плагине используется вроде бы как устаревший druggable плагин, хотя я нашел его в последней UI сборке. Прикрутил все как надо. В итоге по нажатию на ссылку confirm появлялся, и тут же сам себя подтверждал. :)

Кстати у обоих плагинов выше одна проблема – они реагировали только на одну ссылку с ид. Если на странице много ссылок с одним ид или классом, на них плагин уже не вызывался.

3. Вот он confirm плагин моей мечты –

jQuery Easy Confirm Dialog

Сразу ссылки:
Примеры: http://projectshadowlight.org/jquery-easy-confirm-dialog/
Плагин на github: https://github.com/wiggin/jQuery-Easy-Confirm-Dialog-plugin

Это действительно работает и это то, что надо. Используются стили UI. Я пометил класс alert_link как класс плагина и все ссылки на всех страницах с этим классом теперь имеют confirm диалог. Это то, что мне было нужно.
Плагин удобен, имеет настройки.

Вот так можно выполнить какой-то экшн в js после confirm если указать кроме класса ид элемента.


$(".confirm").easyconfirm();
		$("#alert").click(function() {
			alert("You approved the action");
		});

$(".confirm").easyconfirm();

$("#alert").click(function() {

alert("You approved the action");

});

Вот так настраивается сообщение:


$("#french").easyconfirm({locale: {
			title: 'Etes-vous sûr?',
			text: 'Etes-vous sûr que vous souhaitez effectuer cette action?',
			button: ['Annuler',' Confirmer'],
			closeText: 'fermer'
		}});

$("#french").easyconfirm({locale: {

title: 'Etes-vous sûr?',

text: 'Etes-vous sûr que vous souhaitez effectuer cette action?',

button: ['Annuler',' Confirmer'],

closeText: 'fermer'

}});

В общем мой выбор.