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和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

您需要的是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 [] ?????*/
    }
});

mootools组复选框返回值

1 个答案: