checkBoxToggle plugin

by shapeshifta

HTML

<form id="frmMapmodeFilter" action="/_l">
            <ul class="hList filterMapList clearFix" >
                <li>
                    <input type="checkbox" value="Facebook" id="mmFacebook" name="Facebook">
                    <label for="mmFacebook"><span class="spriteGeneral filterIcon filterFacebook ir"></span> Facebook</label> (13)
                </li>
                <li>
                    <input type="checkbox" value="Fußballplätze" id="mmSoccer" name="Fußballplätze"> 
                    <label for="mmSoccer"><span class="spriteGeneral filterIcon filterSoccer ir"></span> Fußballplätze</label> (3)
                </li>
                <li>
                    <input type="checkbox" value="Golfplätze" id="mmGolf" name="Golfplätze"> 
                    <label for="mmGolf"><span class="spriteGeneral filterIcon filterGolf ir"></span> Golfplätze</label> (1)
                </li>
                <li>
                    <input type="checkbox" value="Bars" id="mmBars" name="Bars"> 
                    <label for="mmBars"><span class="spriteGeneral filterIcon filterBars ir"></span> Bars</label> (20)
                 </li>
                <li>
                    <input type="checkbox" value="Tennis" id="mmTennis" name="Tennis"> 
                    <label for="mmTennis"><span class="spriteGeneral filterIcon filterTennis ir"></span> Tennis</label> (5)
                </li>
                <li>
                    <input type="checkbox" value="Tauchen" id="mmDiving" name="Tauchen"> 
                    <label for="mmDiving"><span class="spriteGeneral filterIcon filterDiving ir"></span> Tauchen</label> (9)
                </li>
                <li>
                    <input type="checkbox" value="Cafés" id="mmCafes" name="Cafés"> 
                    <label for="mmCafes"><span class="spriteGeneral filterIcon filterCafes ir"></span> Cafés</label> (6)
                </li>
                <li>
                    <input type="checkbox" value="Reiten"...

JavaScript

$.fn.checkBoxToggle = function(options) {
    var defaults = {
        linkText: 'Alle auswählen',
        toggleText: 'Alle abwählen',
        toggleClass: 'toggleLink'
    };
    var settings = {};

    return this.each(function() {
        settings = $.extend({}, defaults, options);
        
        //Alternativtext suchen, title reset
        if(this.title){
            var linkText = this.title.split('|')[0],
                toggleText = this.title.split('|')[1];
            this.title = '';
        }

        //toggleLink erzeugen
        $('<a />')
            .attr('href', '#')
            .addClass(settings.toggleClass)
            .text(linkText || settings.linkText)
            .on('click', function(e) {
                e.preventDefault();
                var $this = $(this),
                    checkBoxes = $this.prev().find('input[type="checkbox"]');
    
                if (!$this.hasClass('checked')) {
                    $this.addClass('checked').text(toggleText || settings.toggleText);
                    checkBoxes.attr('checked', true);
                } else {
                    $this.removeClass('checked').text(linkText ||settings.linkText);
                    checkBoxes.attr('checked', false);
                }
            }).insertAfter(this);

    });
};

$('ul.filterMapList').checkBoxToggle();