Better Check Boxes with jQuery and CSS

Nice tutorial. Well done! Really usefull.

Regards,
Alex

Very nice! Since the control invites to "slide" the button to the other side, I would add the option to change the value when the button is dragged http://threedubmedia.com/code/event/drag

Really cool stuff.

I just test with latest, ie, opera, safari, chrome and FF and works perfect

was wondering about ie8, ie7

not so much about ie6

It reminds me of how I created the iOS styled on/off buttons. Great job! Very useful!

Very nice, but in the demo if you click to the left of the actual button it works the same as clicking the actual button. Might want to check that out. =-)

Ohhh, very nice!!!

Would be good if there was a left-to-right & right-to-left slide effect when clicked...otherwise awesome work.

This is similar to a design I worked on recently. Having it wrapped up in a jQuery plugin is handy. Having the switch animate would be a nice addition - here's an example of what I did: http://preation.blackantmedia.com/switches.html

Tim it's a part of the plugin ...

"All changes to the checkbox replacement are propagated back to the original checkbox (which is hidden, but still on the page). This also works the other way around, as in certain circumstances (when you click on a label element for example) the original checkbox might be changed. This will trigger the change event and update the replacement."

Hoping for 'Better radio buttons [...]' next week!

Great article. It came just as I was working on an admin panel and was try to figure out how to style the options. You definitely pointed me in the right direction.

Woah , I Love it! :)

Nice job...Thanks for sharing..will help a lot.

Regards,
Sri

Again Awesome Work! Thanks for sharing!

Thank you for the awesome comments, folks!

I used this type of check box replacement a little while back but people couldn't understand if it was checked or not. The changing labels confused them. Is it on when it says on? Or is it off when it says on and it's telling me that if i click on it will be now be on but say off?

Even though people use switches just like this in real life. The usage still escaped them. So in the long run, while I love these, it fails as far as usability goes.

not that it would be hard to make it absolutely clear.

Great technique Martin
but It can be spiced up by using CSS3 transitions property with just a line of CSS code, e.g. "-webkit-transitions:all linear 1s;" (but in that case sprite images should be placed side by side not top to bottom)

Martin,

Truly amazing again. What a great eye for code! I would never of thought to do check boxes like this.

PS. Take a look at this site for me, give me your feedback, need some fresh eyes on it: http://www.arnott-conveyors.co.uk/testing/index.html

Speak soon mate

pretty cool effects ;) thanks for sharing the code .

Really nice example and I guess a little animation won't hurt. I kind of prefer the click over the drag because of mobile functionality. So far, I haven't seen any site or plugin that makes use of the drag while browsing on a mobile device.
Very lovely and creative!

Really nice tutorial. Thanx ;]

Just a little suggestion for funzies... I think it's clearer to label either side of the control, like this: http://cl.ly/5RNJ

As it stands, there is a little confusion as to what the label inside the control means. It could mean:

1) This control is currently at the value shown
2) If I click it, the control will THEN be at the value shown

Just thought you might be interested in this. http://codecanyon.net/item/html5-slick-slider-checkboxes/180044

Seems as though someone is trying to profit of what you have provided here. Nice tutorial by the way, thanks!

The codes are really amazing. I would never of thought or seen to do check boxes like this. great tutorial.

To be clear, I am able to pass either a 1 or a null value with the checkbox, however, I can't make the check box show OFF if there is a NULL value in the database.

yes, I have resolved this matter :]

thanks for your awesome script. works a treat.

in jquery 1.6.2 has bug

I change it

        var checkBox = $('',{
            'class' : 'tzCheckBox '+(this.checked?'checked':''),
            'html': ''+labels[this.checked?0:1]+
                    ''
        });

now good work in jquery 1.5.2 /1.6.2

very nice! but i have a question. i don´t want to use labels and i use jquery functions to manage the option.
so when i click on button, jquery doesn´t execute the command. can u help me?

jquery:
$('#habilitar-base').click(function() { $('#senha-base').attr('disabled', false); });

html:
on

thanks in advance and congratulations for this tutorial =)

Seems to fail when i use another jquery object within the same page

http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/

and i find if i delete the line

the script works again :(

not sure if i can have 2 differnt jquery scripts riding on the same page

with Jquery 1.7.1:
(in jquery.tzCheckbox.js, find "// Creating the new checkbox markup:")

var checkBox = $('<span>',{

    "class"   : "tzCheckBox "+(this.checked?'checked':''),
    "html":   "<span class='tzCBContent'>"+labels[this.checked?0:1]+
    "</span><span class='tzCBPart'></span>"
});

The plug in background image disappears when I use JQuery 1.7.1. Any one know of a fix for this?

Made a change to the jquery.tzCheckbox.js file
I wanted the original class from the old checkbox to set on the new button so I can handle multiple buttons on a page.
http://pastebin.com/gsAeQMpx

I have modified a JS for include 2 new function: javascript caller and enabled state..

(function($){
    $.fn.tzCheckbox = function(options){

        // Default On / Off labels:

        options = $.extend({
            labels : ['Ok','No'],
            actionJS : ['']
        },options);

        return this.each(function(){
            var originalCheckBox = $(this),
                labels = [],actionJS = [];

            // Checking for the data-on / data-off HTML5 data attributes:
            if(originalCheckBox.data('on')){
                labels[0] = originalCheckBox.data('on');
                labels[1] = originalCheckBox.data('off');
            }else{ 
                labels = options.labels;
            }

            // Checking for the actionJS / data-off HTML5 data attributes:
            if(originalCheckBox.data('actionJS')){
                actionJS='onClick="javascript: ' + originalCheckBox.data('actionJS')+'"';
            }else{
                actionJS = 'onClick="javascript: ' + options.actionJS +'"';
            }

            // Checking for the ENABLED / data-off HTML5 data attributes:
            if(originalCheckBox.data('disabled')){
                state=originalCheckBox.data('disabled');
            }else{
                state = '';
            }

            //alert(actionJS);

            // Creating the new checkbox markup:
            var checkBox = $('<span>',{
                className   : 'tzCheckBox '+(this.checked?'checked':''),
                html:   '<span class="tzCBContent"  ' + actionJS +
                '>'+labels[this.checked?0:1]+'</span><span  class="tzCBPart"></span>'
            });

            // Inserting the new checkbox, and hiding the original:
            checkBox.insertAfter(originalCheckBox.hide());
            if(state==''){
                checkBox.click(function(){
                    checkBox.toggleClass('checked');
                    var isChecked = checkBox.hasClass('checked');
                    // Synchronizing the original checkbox:
                    originalCheckBox.attr('checked',isChecked);
                    checkBox.find('.tzCBContent').html(labels[isChecked?0:1]);
                });
                // Listening for changes on the original and affecting the new one:
                originalCheckBox.bind('change',function(){
                    checkBox.click();
                });

            }
        });
    };
})(jQuery);

http://jsfiddle.net/ULphC/
I have custom select all/none buttons. However when they are clicked tzCheckboxes are not changed accordingly. Is it because the way I did it does not fire change events?

Work more than good
But I have problems not to display the value when you use this code

$ ('input [type = checkbox]'). tzCheckbox ({labels: ['Enable', 'Disable']});

Thanks

This is a great plugin - exactly what I was looking for. I'm having two difficulties, though. First - I can't seem to get the checkbox to return a value. Even when I click it and change the state, it's value isn't changing. Second - I want to have a function execute when the state of the checkbox changes - and I bound a change function to the ID of the checkbox - but nothing is triggering. Using query 1.7.1

there’s also this jQuery plugin called <a href="http://stefangabos.ro/jquery/zebra-transform/">Zebra_Transform</a&gt; which transforms all the check boxes, radio buttons and select boxes on a page. it’s not as fancy as yours, but it is very very small (3KB) and works in all major browsers.

How to "Check all" or "Uncheck all" using a single button click???

To check or uncheck all using a single button

<input type="button" class="check" value="check all" />

<script>
$('input[type=checkbox]').tzCheckbox({
labels: [ 'Enable', 'Disable' ]
});
$(document).ready(function(){
$('.check:button').click(function(){
if(!$('.tzCheckBox').hasClass('checked'))
{
$('.tzCheckBox').addClass('checked');
$('.tzCheckBox').find('.tzCBContent').html('Enable');
$(this).val('uncheck all');
}
else
{
$('.tzCheckBox').removeClass('checked');
$('.tzCheckBox').find('.tzCBContent').html('Disable');
$(this).val('check all');
}
})
});
</script>

Your script is perfect but i can't take the value from checkbox and submit form onchange

Martin, you're the best. Thank you!

For later versions of Jquery I use 1.9.1 you need to change the javascript to the following

var checkBox = $('<span>',{
    class   : 'tzCheckBox'+(this.checked?' checked':''),
    html:   '<span class="tzCBContent">'+labels[this.checked?0:1]+
            '</span><span class="tzCBPart"></span>'
});

I think className has been depreciated, also there were some extra spaces in the class declaration
The entire code segment is

(function($){
    $.fn.tzCheckbox = function(options){

        // Default On / Off labels:

        options = $.extend({
            labels : ['ON','OFF']
        },options);

        return this.each(function(){
            var originalCheckBox = $(this),
                labels = [];

            // Checking for the data-on / data-off HTML5 data attributes:
            if(originalCheckBox.data('on')){
                labels[0] = originalCheckBox.data('on');
                labels[1] = originalCheckBox.data('off');
            }
            else 
            {
                labels = options.labels;
            }
            // Creating the new checkbox markup:
            var checkBox = $('<span>',{
                class   : 'tzCheckBox'+(this.checked?' checked':''),
                html:   '<span class="tzCBContent">'+labels[this.checked?0:1]+
                        '</span><span class="tzCBPart"></span>'
            });

            // Inserting the new checkbox, and hiding the original:
            checkBox.insertAfter(originalCheckBox.hide());

            checkBox.click(function(){
                checkBox.toggleClass('checked');

                var isChecked = checkBox.hasClass('checked');

                // Synchronizing the original checkbox:
                originalCheckBox.attr('checked',isChecked);
                checkBox.find('.tzCBContent').html(labels[isChecked?0:1]);
            });

            // Listening for changes on the original and affecting the new one:
            originalCheckBox.bind('change',function(){
                checkBox.click();
            });
        });
    };
})(jQuery);

Thanks for the example best one I could find

I think you have to use:
originalCheckBox.prop('checked',isChecked);
now instead of
originalCheckBox.attr('checked',isChecked);