I want to create a very custom look for checkboxes. To do it I want to
replace a standard <input type="checkbox"/> with the following...

<div class="checkbox">
     <input type="checkbox"/>
     <img src="clear.gif"/>

This will allow me (via css) to overlay the transparent image
(clear.gif) on top of the <input> field and change the image's
background image to get whatever look/feel i want. The change will be
accomplished by adding/removing a class of "checked" to the
div.checkbox element and subsequently toggling the <input> element
itself. I'm trying to do this by creating a class using Prototype. I
think i'm close, but I'm not very good with this so I need help :(

here's the class...

var CustomCheckbox = Class.create({

        initialize : function(elem) {
                this.input = elem;
                this.image = '<img src="assets/images/clear.gif"/>';

        ,convertInput : function() {
                if(!this.input.checked) {
                        this.checkbox = this.input.wrap('div', { 'class': 
'checkbox' });
                } else {
                        this.checkbox = this.input.wrap('div', { 'class': 
checked' });
                this.checkbox.insert({ bottom: this.image });

        ,registerEventListener : function() {
                Event.observe(this.checkbox, 'click', function() {

        ,toggleInput : function() {
                if(this.checkbox.hasClassName('checked')) {
                        this.input.checked = false;
                } else {
                        this.input.checked = true;

..and here's how i'm implementing it...

Event.observe(window, 'load', function() {
        $$('input[type=checkbox]').each(function(input) {
                new CustomCheckbox(input);

You received this message because you are subscribed to the Google Groups 
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at 

Reply via email to