Dynamic action on checkbox using jQuery selectors

Question

Aim: Have a classic report with a checkbox for each record that fires a dynamic action. I'd like to source the relevant ID/value within Javascript (ultimately PL/SQL)
Consider a classic report using the following query
SELECT label
,apex_item.checkbox
  (p_idx   => 15 -- f42
  ,p_value => id
  ,p_attributes => 'id="f15_'||id||'" class="xyz"'
  ) chk
FROM   my_tableDefine a dynamic action with
Event: Click
Selection type: jQuery selector
jQuery selector: .xyz
No condition
Scope:Bind
I have an action executing javascript
var me = this.triggeringElement;
console.log('me:'||me);
console.log('name:'||me.attr('name') );
console.log('id:'||me.attr('id') );
console.log('value:'||me.prop('val'));Affected elements Selection type: Triggering element
When I run the page and check a box, the DA fires, but all output shown in the console log is blank.
I've tried copious variations to get this right, such as using $(this.triggeringElement)
These pages make me feel confident I have the syntax right
http://stackoverflow.com/questions/12038392/oracle-apex-checkbox-to-manipulate-other-values-when-checked-unchecked
http://iadviseblog.wordpress.com/2011/08/24/get-triggering-element-in-da/
But my values are still null?! Anyone know what I've missed?
Apex 4.1.1
Scott

Answer 1

var me = this.triggeringElement;
console.log('me:'||me);
console.log('name:'||me.attr('name') );
console.log('id:'||me.attr('id') );
console.log('value:'||me.prop('val'));<ul>
<li>Concatenation in javascript is with +* and not *||* (which means OR)</li>
<li>Also, this.triggeringElement is a reference to the DOM element, it is not a jQuery object. So wrapping it in $() is required when you wish to access properties through jQuery.</li>
<li>.prop('val') won't work. You need to check for the existence of a property-line attribute, which in case of a checkbox could be "checked".</li>
<li>dynamic action on a report: use scope Live to prevent functionality from working when the report is refreshed/paginated</li>
</ul>
var me = $(this.triggeringElement);
console.log('me:'+me);
console.log('name:'+me.attr('name') );
console.log('id:'+me.attr('id') );
console.log('value:'+me.prop('checked'));