I am trying to detect when a change has occurred on a checkbox(es) but so far have tried with onchange, onclick and [just] click without success. I have 'inherited' the HTML for the checkbox(es) (built via Smarty templates) which are built as per here:-

I then declare a 'click' function against that object which itself is intended to run another 'retrieve' function. The later 'retrieve' function carries out an AJAX call based on the value(s) of the checkbox(es) and populates another control.

I have substituted the 'click' shown here with 'on change' and 'onclick' but to no avail. I have read a number of articles including one that suggests that I might have to add an event listener... but I am not entirely sure of the syntax needed in my case?

Would you advise as to how I fire an event when the user clicks/unclicks any of the boxes in the collection?

Could you please provide a jsfiddle with what you have so far so we can test and check the problem for ourselves.
– Chris BeckettOct 6 '16 at 14:21

You're attaching an event handler on the first field1[] only, if you want to attach it to the rest of the elements, you have to iterate. If you want to attach it to dynamically generated elements gotten with ajax, you have to attach the event handler after the elements are loaded and inserted, or use a delegated event handler, which can be a bit complicated when not using a library (like jQuery).
– adeneoOct 6 '16 at 14:23

HI... Does adding this event listener mean that I do not need to alter the HTML tags?
– Gray_emOct 6 '16 at 14:55

So I have added parent_obj_field1[0].addEventListener('change', function (event) {alert('changed') }); but do not get an alert when I click any of the boxes? I may be misunderstanding how this works?
– Gray_emOct 6 '16 at 15:06

The change event is sent to an element when its value changes. This event is limited to <input> elements, <textarea> boxes and <select> elements. For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus.