Question

The following javascript (prototype 1.6) code hides all checkboxes on the page and inserts a div element with some css style and a click event to act as a fake-checkbox. It also looks out for a label next (or previous) the checkbox, to also trigger the same event.

When I click the div (fake_el) itself, everything works as expected, but when I try the same with the label, it only works one time. after that, the el isn’t gonna change – as if it (the el) would be a value-parameter.

Any ideas here?

    $$('input[type=checkbox]').each(function(el) {
        if (el.visible()) {
            var fake_el = new Element('div', { className:'checkbox checkbox_' + el.checked });
            var label = (el.next() != null && el.next().tagName === 'LABEL' && el.next().readAttribute('for') === el.id) ? el.next() : undefined;
            label = (el.previous() != null && el.previous().tagName === 'LABEL' && el.previous().readAttribute('for') === el.id) ? el.previous() : label;
            var action = function(el) {
                el.checked = (el.checked) ? false : true;
                fake_el.className = 'checkbox checkbox_' + el.checked;
            }

            fake_el.observe('click', function() { action(el); });
            if (label != null) { label.observe('click', function() { c.log(el); action(el); c.log(el); }); }
            el.insert({ after:fake_el }).hide();
        }
    });

Answer 1

I changed a couple items and created a jsFiddle for this. First and foremost, c.log had to be changed to console.log for it to work for me :). After that, the only thing I changed was how the divs were added, since it wasn’t working for me with insert. I set up some test data and away I went…

EDIT: Perhaps you don’t have a non-label tag between two checkboxes and it is getting confused? Notice I have a br between label and the next checkbox, maybe you need to do something like that.