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

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/

Answer 3

另一种解决方案：

标记：

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

ExtJS函数切换所有复选框

3 个答案: