Question

I have a page with 50 hidden checkboxes, and I want to be able to toggle each checkbox by clicking on a visible link. The actual checkboxes have to stay hidden…so… Is there a better way to do this, with a JS function so I don’t have to include the entire onclick in each link? And I use mootools, not jQuery.

This works to activate a checkbox:

<a href="#template-selections" onclick="javascript:check('field_select_p10');" class="add_app">Select</a>

But to toggle it, this works:

onclick="if (event.target.tagName != 'INPUT') document.getElementById('field_select_temp_professional_10').checked = !document.getElementById('field_select_temp_professional_10').checked"

Answer 1

None of what you posted is actually mootools code, you may as well not use mootools…

Markup:

<a href="#template-selections" data-id="10" class="add_app">Select</a>

js in your domready:

document.getElements("a.add_app").addEvents({
    click: function(e) {
        if (e.target.get("tag") != 'input') {
             var checkbox = document.id("field_select_p" + this.get("data-id"));
             checkbox.set("checked", !checkbox.get("checked"));
        }
    }
});

If you have 100+ then I suggest you look at using event delegation from mootools-more and add just one event to the parent instead of creating 100 events and storing 100 functions that deal with it.

This is coding to patterns, and it involves changing your markup to make things work. You can also make the change based upon walking the DOM in relation to the clicked item, e.g. this.getParent().getElement("input[type=checkbox]"), or something can mean you don’t need to store a relative id in the element itself.