mootools的组复选框返回值

Question

我怎样才能返回所选择的复选框值从MooTools的类：

MooTools的类：

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和脚本：

<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

你需要的是Selector: checked 由于它很容易从包含它们的容器中获取checked元素，所以我通过将容器元素添加到构造函数中来更改类（在你的例子中，只需将id =“container”添加到容器中，但是你可以选择如何以你的方式实现这一点 - 例如）。

一件事是，你不需要定义的“onCheckboxClick”在你的班级，因为这是你被暴露你的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 [] ?????*/ 
    } 
});