使用prototype操纵check box

关键字: prototype   prototype    

prototype中的$F()真是好用，但是在html中的checkbox是可多选的，prototype有没有给我们提供得到选中的checkbox的值的便利的方法呢
我翻了好久没找到，于是写了一个使用Enumerable操纵checkbox的例子

代码

<script>
    function testSelect()
    {
        var chkbox = document.getElementsByName('slt');
        var nodes = $A(chkbox);
        var sltNodes = nodes.select(function(node)
        {
            return node.checked;
        });
        sltNodes.each(function(node)
        {
            alert(node.value);
        });

    }
</script>
    <input type="checkbox" name="slt" value="1"/> 1<br/>
    <input type="checkbox" name="slt" value="2"/> 2<br/>
    <input type="checkbox" name="slt" value="3" checked="true"/> 3<br/>
    <input type=button value="test select" onclick="testSelect()">

<script>render_code();</script>
魔法发生在 $A，如果去掉

代码

var nodes = $A(chkbox);

<script>render_code();</script>
改成

代码

var chkbox = document.getElementsByName('slt');

var sltNodes = chkbox.select(function(node)
{
    return node.checked;
});
sltNodes.each(function(node)
{
    alert(node.value);
});

<script>render_code();</script>
那么js就会报错，说chkbox没有select这个方法，看了一下$A的源码，

代码

var $A = Array.from = function(iterable) {
  if (!iterable) return [];
  if (iterable.toArray) {
    return iterable.toArray();
  } else {
    var results = [];
    for (var i = 0; i < iterable.length; i++)
      results.push(iterable[i]);
    return results;
  }
}

Object.extend(Array.prototype, Enumerable);

<script>render_code();</script>
Array.from在哪里？没找到?那位大人能够解释一下，$A()的作用？

评论

1 楼 tudou721 2008-12-27  

应该是prototype扩展的问题吧

像这个例子：
var paras = $A(document.getElementsByTagName('p'));
paras.each(Element.hide);
$(paras.last()).show();

这里的Element.hide就必须使用
因为$A()并不执行DOM扩展的动作
做hide这个实例方法，以确保我们的目标元素都已经被扩展了。

那么select也应该是这样的