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

必要なのはセレクターです。チェック されたそれらを含むコンテナー内からチェックされた要素を取得するのは非常に簡単なので、コンストラクターにコンテナー要素を追加してクラスを変更しました(この例では、コンテナーに id="container" を追加するだけですが、あなたのやり方でそれを達成したい方法を選択することができます - これは単なる例です)。

もう1つ、APIを公開することで発生させるイベントであるため、クラスで「onCheckboxClick」を定義する必要はありません: 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 に答える