论坛首页 Web前端技术论坛

使用prototype操纵check box

浏览 10085 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2006-10-31  
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()的作用?
   发表时间: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扩展的。
0 请登录后投票
   发表时间:2006-10-31  
document.getElementsByName 返回的不也是一个Array吗?
0 请登录后投票
   发表时间:2006-10-31  
Ivan Li 写道
document.getElementsByName 返回的不也是一个Array吗?
不是,通过ff打印出来的信息可以看出getElementsByName 得到的是 [object HTMLCollectoin]
0 请登录后投票
   发表时间:2006-10-31  
你是怎么做的?怎么在ff中看?
0 请登录后投票
   发表时间:2006-10-31  
var chkbox = document.getElementsByName('slt');
alert(chkbox);
var nodes = $A(chkbox);
alert(nodes);

很明显两个对象是不一样的。Array的话,会把其内部的元素都打印出来。
0 请登录后投票
   发表时间:2007-03-27  
这个好像只是在ie中会出现。注释里面说了ie里面直接获取的element有可能是没有wrap的,这样prototype扩展的方法可能就会没有。此时可以使用$系列方法,再返回的对象就都是wrap过的了,所有prototype定义的方法就都OK了。
0 请登录后投票
   发表时间:2007-04-25  
我也想知道怎么在FF里面看相关信息
0 请登录后投票
   发表时间:2007-04-26  
为啥不用$$呢,一行代码就可以搞定的:
<script>
function testSelect() {
    $$('input[type="checkbox"][name="slt"]').select(function(i){return i.checked}).each(function(i){alert(i.value)});
}
</script>
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics