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 [] ?????*/ 
    } 
});