mootools group checkbox return values

Question

How can I return selected checkboxes values from mootools class:

Mootools class:

var CheckboxGroup = new Class({

    Implements: Events,

    initialize: function(master, slaves) {
        this.master = $(master);
        this.slaves = $$(slaves);
        this.selected = [];            
        var that = this;

        this.master.addEvent('click', this.onMasterClick.bind(this));
        this.slaves.addEvent('click', function() {
            that.onSlaveClick(this);
        });
    },

    onMasterClick: function() {
        this.slaves.set('checked', this.master.get('checked')).fireEvent('change');
        this.fireEvent('masterClick');
        this.fireEvent('onCheckboxClick');
    },

    onSlaveClick: function(slave) {
        this.master.set('checked', this.slaves.every(function(el) { return el.get('checked'); }));
        this.fireEvent('slaveClick', slave);
        this.fireEvent('onCheckboxClick');
    },

    onCheckboxClick: function() {

    ??? how to return selected values   
    }

});

HTML AND SCRIPT:

<div class="container">
    <label class="master"><input type="checkbox" id="master" /> Master</label>
    <label><input type="checkbox" class="slave" value="1"/> Slave #1</label>
    <label><input type="checkbox" class="slave" value="2"/> Slave #2</label>
    <label><input type="checkbox" class="slave" value="3"/> Slave #3</label>
    <label><input type="checkbox" class="slave" value="4"/> Slave #4</label>
    <label><input type="checkbox" class="slave" value="5"/> Slave #5</label>
</div>
<script>
        new CheckboxGroup('master', '.slave').addEvents({
        'onCheckboxClick': function() {
            console.log(this.selected); /*EVERY TIME [] ?????*/
        }
    });
</script>

Answer 1

What you need is the Selector: checked Since it's very easy to get checked element from within a container that contains them I changed your class by adding container element to the constructor(in your example just add id="container" to the container but you can choose how you want to achieve that in your way - this is just for example).

One more thing is you don't need to defined "onCheckboxClick" in your class since this is event you are raising by exposing your API: http://jsfiddle.net/BqVtL/

var CheckboxGroup = new Class({

    Implements: Events,

    initialize: function(container,master, slaves) {
        this.container = document.id(container);
        this.master = $(master);
        this.slaves = $$(slaves);
        this.selected = [];            
        var that = this;

        this.master.addEvent('click', this.onMasterClick.bind(this));
        this.slaves.addEvent('click', function() {
            that.onSlaveClick(this);
        });
    },

    onMasterClick: function() {
        this.slaves.set('checked', this.master.get('checked')).fireEvent('change');
        this.setSelected();
        this.fireEvent('masterClick');
        this.fireEvent('onCheckboxClick');
    },

    onSlaveClick: function(slave) {
        this.master.set('checked', this.slaves.every(function(el) { return el.get('checked'); }));
        this.setSelected();
        this.fireEvent('slaveClick', slave);
        this.fireEvent('onCheckboxClick');
    },

    setSelected: function(){
        //you can loose the container mechanism and use $$('.slave:checked').get('value') 
   //     this.selected = this.container.getElements('.slave:checked').get('value');


          //Dimitar Christoff better solution: (then there is no need in container at all)
          this.selected = this.slaves.filter(':checked').get('value');


    }

});

new CheckboxGroup('container','master', '.slave').addEvents({
    'onCheckboxClick': function() {
        console.log(this.selected); /*EVERY TIME [] ?????*/
    }
});