Question

Say we have a yui3 form:

YUI().use("gallery-form", function (Y) {
var checkbox = new Y.CheckboxField({
    name : "myCheckbox",
    value : "check",
    label : "Test Checkbox"
});

var f = new Y.Form({
    boundingBox: '#form',
    action : 'test.php',
    method : 'post',
    children : [
        checkbox ,
        {name : 'submitBtn', type : 'SubmitButton', value : 'Submit'}
    ]
});

f.render();
});

I.e. form has a lot of checkboxes; I would like every checkboxes on this form to onchange="fn(this)".
Here’s a small example of what i need.

NB. checkbox in the second line shouldn’t be modify. I’m looking for something like:

form.all('input type=checkbox').on('change', fn(checkbox));

_

// where fn is:
function fn(el){ console.log(el.checked); }

Answer 1

This one is kind of criptic. I think the expected way is to do form.on('*:change', fn) and filter the event propagation, but I can’t find a way to avoid duplicate calls to the callback.

So you can resort to the Form’s change UI event and do:

form.on('change', function (e) {
  var checkbox = e.domEvent.target;
  console.log(checkbox.get('checked'));
});