使用prototype操纵check box

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()">	

魔法发生在 $A，如果去掉

var nodes = $A(chkbox);

改成

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

那么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);

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

评论

8 楼 Readonly 2007-04-26  

为啥不用$$呢，一行代码就可以搞定的：

<script>
function testSelect() {
    $$('input[type="checkbox"][name="slt"]').select(function(i){return i.checked}).each(function(i){alert(i.value)});
}
</script>

7 楼 过河卒 2007-04-25  

我也想知道怎么在FF里面看相关信息

6 楼 Tin 2007-03-27  

这个好像只是在ie中会出现。注释里面说了ie里面直接获取的element有可能是没有wrap的，这样prototype扩展的方法可能就会没有。此时可以使用$系列方法，再返回的对象就都是wrap过的了，所有prototype定义的方法就都OK了。

5 楼 foxty 2006-10-31  

var chkbox = document.getElementsByName('slt');
alert(chkbox);
var nodes = $A(chkbox);
alert(nodes);

很明显两个对象是不一样的。Array的话，会把其内部的元素都打印出来。

4 楼 IvanLi 2006-10-31  

你是怎么做的？怎么在ff中看？

3 楼 foxty 2006-10-31  

Ivan Li 写道

document.getElementsByName 返回的不也是一个Array吗？

不是，通过ff打印出来的信息可以看出getElementsByName 得到的是 [object HTMLCollectoin]

2 楼 IvanLi 2006-10-31  

document.getElementsByName 返回的不也是一个Array吗？

1 楼 foxty 2006-10-31  

var $A = Array.from = function(iterable)

这里可以理解为 int a = b = 1;

Object.extend(Array.prototype, Enumerable);

这里的Array“继承”了Enumerable的属性集合，再来看看Enumerable对象有哪些属性：

Object.extend(Enumerable, {
  map:     Enumerable.collect,
  find:    Enumerable.detect,
  select:  Enumerable.findAll,
  member:  Enumerable.include,
  entries: Enumerable.toArray
});

就从这里一段代码就可以看到Enumeralbe.select ＝ Enumerable.findAll;

继续深挖：
findAll: function(iterator) {
    var results = [];
    this.each(function(value, index) {
      if (iterator(value, index))
        results.push(value);
    });
    return results;
  },
这是截取了Enumerrable对象的部分定义内容，你可以搜索 findAll查找。

$A就是把一个集合转换成一个标准数组。仔细再ff下面察看了下，通过 document.getElementsByName 得到结果是一个HTMLCollection，经过$A后就被转换成一个Array了。当然这个Array是经过Prototype扩展的。