0

如何从 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>
4

1 回答 1

1

您需要的是Selector: 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 [] ?????*/
    }
});
于 2013-03-23T21:59:00.993 回答