Hi,

Two ways you can go about this:

1. Observe all of the checkboxes individually.  To do this, you can
either assign a class to them and use a class CSS selector with $$[1]
(e.g., "$$('input.classname')"), or if you really want to you can use
attribute substring selectors[2] with $$() and it would look something
like "$$('input[id^=5day]')".  In either case you get back an array of
extended Elements, on which you can use Enumerable#invoke[3] to
observe:

    $$('selector-goes-here').invoke(
        'observe',
        'click',
        function(event) { ... }
    );

2. Use event delegation:  With event delegation, you hook the 'click'
event on the container of all of these checkboxes (sounds like they're
rows in a table, so you could hook the event on the tbody or
something) because clicks on elements bubble up through the container
elements.  Your handler then checks whether the element that was
clicked is one of these checkboxes, and if so executes the code to
handle it.  (You'll want to test to make sure that the checkbox state
is already updated by the time the event reaches the container; if it
isn't, you can use Function#defer to wait until it is.)

FWIW, your scenario sounds like exactly the kind of situation where
event delegation is called for.  You should be able to find some
articles on it with some web searches.

Separately:  You're doing a lot of unnecessary work in your handler.
It's calling Event#element three times when once would be sufficient.
And in fact, as of Prototype 1.6, if you're *not* using event
delegation but rather hooking the event on the actual element, you can
just use "this".  But if you're going to switch to using event
delegation, you want to keep using Event#element -- but store and
reuse the result:

    function(event) {
        var elm;
        elm = event.element();
        if (elm.checked) {
            elm.addClassName('5day');
        } else {
            elm.removeClassName('5day');
        }
    }

or if you want to be really terse about it:

    function(event) {
        var elm;
        elm = event.element();
        elm[elm.checked ? 'addClassName' : 'removeClassName']('5day');
    }

(And yes, lurking pedants, I could have avoided repeating "ClassName"
in that, at the expense of readability and maintainability IMHO.)

[1] http://www.prototypejs.org/api/utility/dollar-dollar
[2] http://www.w3.org/TR/css3-selectors/#attribute-substrings
[3] http://www.prototypejs.org/api/enumerable/invoke
[4] http://www.prototypejs.org/api/function/defer

HTH,
--
T.J. Crowder
tj / crowder software / com

On Jan 7, 9:14 pm, Russell <russell.ke...@aacreditunion.org> wrote:
> I have the following script to highlight a row in table when a
> checkbox is checked.  I need to adapt it to work with many rows where
> the id = 5day_#.  The number is equal to the arbitrary row id I am
> getting from the database.  Is there a way to insert a wildcard in the
> element name or am I just going about this from the wrong direction?
>
>             $('5day').observe( 'click', function(event) {
>                         if ($(Event.element(event)).checked) {
>                                     $(Event.element
> (event).parentNode.parentNode).addClassName('5day');
>                         } else {
>                                     $(Event.element
> (event).parentNode.parentNode).removeClassName('5day');
>                         }
>             });
--~--~---------~--~----~------------~-------~--~----~
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 
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at 
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply via email to