Elegantné označenie riadkov v checkbox zozname

Možno potrebujete vylepšiť svoj zoznam, kde máte výber pomocou checkboxu tak, aby užívateľ nemusel triafať na checkbox ale mohol pohodlne kliknúť kdekľvek v zozname. Riešenie problému nieje nijak zložité, jedná sa o pár riadkov kódu. Napriek tomu možno tento problém nedokážete vyriešiť sami. Možno si poviete, že to nemôže byť zložité, avšak problém nastáva keď máte click akciu na riadku zoznamu, ktorý vám označí checkbox. Akcia na riadku pôjde bez problému avšak keď kliknete na checkbox tak nastane situácia akoby na checkbox bolo kliknuté dva krát a checkbox preto nezmení svoj stav.

Poďme si ukázat ako by mal vyzerat kód ktorý nám zabezpeči aby sa situácia dvojiteho kliknutia nestala:

$(document).ready(function() { $('ul#zoznam li').click(function(event) { if (event.target.type !== 'checkbox') { $(':checkbox', this).attr('checked', true); } }); });

Ako môžte vidieť kód, tak práve 5. riadok kódu nám overuje, či to na čo klikneme nieje checkbox. Ak je podmienka splnená tak klikne na všetky checkboxy v danom riadku.

Aby sme ale náš kód vylepšili a pridali zvýraznenie riadku budeme potrebovať náš plugin rozšíriť. Na to aby zvýrazňovanie fungovalo ako má potrebujeme pridať 3 vlastnosti. Ak je kliknuté na riadok, ak je kliknuté na checkbox a zvýraznenie riadku, ktorý bol označený. Pre jednoduchosť kódu si to zhrnieme:

$(document).ready(function() { $('ul#zoznam li') .filter(':has(:checkbox:checked)') .addClass('selected') .end() .click(function(event) { if (event.target.type !== 'checkbox') { $(':checkbox', this).trigger('click'); } }) .find(':checkbox') .click(function(event) { $(this).parents('li:first').toggleClass('selected'); }); });

Na zaciatku vyfiltruje riadky ktoré majú označený checkbox a pridá im zvýraznenie. Potom tu máme akciu kliknutie, ktorá ako bolo spomenuté vyššie overí či to na čo bolo kliknuté nebolo checkbox, ak nie tak označí checkbox v riadku. Nakoniec nám vyhľadá checkboxy a pridá im akciu na kliknutie, ktorá nám zvýrazňuje samotný riadok.

Teraz si už len funkciu prerobíme do pluginu. Tak tu máme náš plugin:

(function($) { $.fn.oznacRiadok = function(nastavenia) { var predvolene = { trieda: 'selected' }; var nastavenia = $.extend(predvolene, nastavenia); return this.each(function() { $(this) .filter(':has(:checkbox:checked)') .addClass(nastavenia.trieda) .end() .click(function(event) { if (event.target.type !== 'checkbox') { $(':checkbox', this).trigger('click'); } }) .find(':checkbox') .click(function(event) { $(this).parents('li:first').toggleClass(nastavenia.trieda); }); }); } })(jQuery);

A samotná inicializácia pluginu s vlastnosťou pre názov triedy pri označení:

$(document).ready(function() { $('ul li').oznacRiadok( { trieda: 'oznacene' }); });

Tagy: oznacenie zoznam checkbox