javascript - 用于切换所有复选框的 ExtJS 函数

Question

我有一个简单的 HTML 复选框列表，如下所示：

   <input type="button" class="check" value="check all" onclick="foo()"/>

   <input type="checkbox" class="chk" value="1"/> Checkbox  1
   <input type="checkbox" class="chk" value="2"/> Checkbox  2
   <input type="checkbox" class="chk" value="3"/> Checkbox  3

单击“全选”按钮时，我想编写一个ExtJS 函数，该函数选择所有复选框（并再次切换它会取消选择所有复选框）并返回数组中的选定值。我已经使用 jQuery 完成了它，但需要使用我非常新的 ExtJS 来编写它。

Answer 1

Ext.select('.chk').each(function(el) {
    el.dom.checked = true;
});

Answer 2

另一个解决方案：

标记：

<input id="toggle" type="checkbox" name="toggle" value="true"><br />
<input class="chk" type="checkbox" name="chk[]" value="1"><br />
<input class="chk" type="checkbox" name="chk[]" value="2"><br />
<input class="chk" type="checkbox" name="chk[]" value="3">

JS：

document.getElementById('toggle').onclick = function() {
  var isChecked = false;
  if (this.checked) isChecked = true;
  Ext.select('.chk').each(function(el) {
    el.dom.checked = isChecked;
  });    
};

JsFiddle：http: //jsfiddle.net/rayphi/ZeTvX/

Answer 3

HTML：

<div>
    <label for="check">
        <input type="checkbox" class="check" value="Toggle all" id="check" />
        Toggle All
    </label>
</div>
<div>
   <label for="chk1">
       <input type="checkbox" class="chk" id="chk1" value="1" />
       Checkbox  1
    </label>
   <label for="chk2">
       <input type="checkbox" class="chk" id="chk2" value="2" />
       Checkbox  2
    </label>
   <label for="chk1">
       <input type="checkbox" class="chk" id="chk3" value="3" />
       Checkbox  3
    </label>
</div>

JS：

document.getElementById('check').onclick = function() {
    var me = this;
    var out = [];
    Ext.select('.chk').each(function(el) {
        el.dom.checked = me.checked;
        if (me.checked) out.push(el.dom.value);
    });
    console.log(out);
};

看实际：

http://jsfiddle.net/GeoForce/Er2JF/1/