@@关于getElementsByName和"如何控制复选框选中数量"的探讨@@(恳切希望黄蓉老师能够参与)

[slumcherry]

1.我搜索到一帖,是关于getElementsByName的:
emu(ston) 说它返回答是对象集合,不是数组.
xinyunyishui(心云意水) 说返回数组.
请问到底是什么? 二者有区别吗?

2.关于这个问题,大家有没有好一点的算法:
9个复选框,最多可以选5个,超过5个时,让第六个被选中的复选框恢复为原来
没有选中的状态.

我能想到的就是possible_Y的方法:
<script>
function check(obj)
{
var j=0;
var el = f1.elements;
var count = el.length;
for (i=0;i<count;i++)
{
if (el[i].type=="checkbox" && el[i].checked==true)
j++;
}
if(j>5)
{
alert("最多只能選取5個");
obj.checked=false;
}
}
</script>
<form name="f1" action="" method="post">
<input type="checkbox" onclick="check(this)">
<input type="checkbox" onclick="check(this)">
<input type="checkbox" onclick="check(this)">
<input type="checkbox" onclick="check(this)">
<input type="checkbox" onclick="check(this)">
<input type="checkbox" onclick="check(this)">
<input type="checkbox" onclick="check(this)">
<input type="checkbox" onclick="check(this)">
<input type="checkbox" onclick="check(this)">
</form>


我现在有这么个想法:
不用在每个input中写onclick事件, 在form中定义onclick事件,然后用循环遍历每个
checkbox,利用一个计数变量统计选中的数量.但是有一个问题没有解决,就是如何得知哪个复选框是最后被选中的. 如果这个问题解决就可以使最后选中的复选框恢复.

希望大家能思考一下,谢谢!

[心云意水]

1.这个我来解释。
getElementsByName返回的是所有name为指定值的所有元素的集合，但是，很多人搞不懂这个集合是个什么概念，而恰恰它的引用方式和数组一样，所以我当时就这么一说，纯属偷懒+误人子弟!-_-
2.这个简单，event.srcElement就可以
<script>
function check(obj)
{
var j=0;
var el = f1.elements;
var count = el.length;
var obj=event.srcElement;
for (i=0;i<count;i++)
{
if (el[i].type=="checkbox" && el[i].checked==true)
j++;
}
if(j>5)
{
alert("最多只能選取5個");
obj.checked=false;
}
}
</script>
<form name="f1" action="" method="post">
<input type="checkbox" onclick="check(this)">
<input type="checkbox" onclick="check(this)">
<input type="checkbox" onclick="check(this)">
<input type="checkbox" onclick="check(this)">
<input type="checkbox" onclick="check(this)">
<input type="checkbox" onclick="check(this)">
<input type="checkbox" onclick="check(this)">
<input type="checkbox" onclick="check(this)">
<input type="checkbox" onclick="check(this)">
</form>

[心云意水]

晕！又偷懒，触发事件没改：（
都是最近破delphi闹得……
<script>
function check(obj)
{
var j=0;
var el = f1.elements;
var count = el.length;
var obj=event.srcElement;
for (i=0;i<count;i++)
{
if (el[i].type=="checkbox" && el[i].checked==true)
j++;
}
if(j>5)
{
alert("最多只能選取5個");
obj.checked=false;
}
}
</script>
<form name="f1" action="" method="post" onclick="check(this)">
<input type="checkbox" >
<input type="checkbox" >
<input type="checkbox" >
<input type="checkbox" >
<input type="checkbox" >
<input type="checkbox" >
<input type="checkbox" >
<input type="checkbox" >
<input type="checkbox" >
</form>

[slumcherry]

谢谢斑竹的解答,原来用event.srcElement就可以了.我那个方法笨是笨,但是我还是想知道能不能实现.

[cloudchen]

<SCRIPT LANGUAGE="JavaScript">
var c=0,limit=5;
function limitCheck(obj) {
obj.checked?c++:c--;
if(c>limit)obj.checked=false,c--;
}
</SCRIPT>
<form>
<script>
for (var i=0;i<20;i++) {
document.write("<input type='checkbox' name='xx' onclick='limitCheck(this)'>")
}
</script>
</form>

[slumcherry]

学习,看来我的方法真是够笨的.
我当时想定义两个数组,一个存放上次点击复选框时所有被选中的复选框,另一个存放这次所有
被选上的复选框. 然后两个数组进行比较, 筛选出最后点击的复选框. 可是一直都没有实现.
唉......

[slumcherry]

学习! 看来应该经常问问这种问题,理解就会更深刻! 感谢大家!

[meizz]

在网页里尽量不定义全局变量, 这样可以避免以后变量名混淆带来的麻烦, 能够在一个函数里搞定的东西就不要迁涉到函数后的东西, 这就好象对象编程一样尽量封装在一个函数里.

集合比数组要松散的多, 集合里每个子项的类型可以不同, 集合只是把某些元素放在一起作为一类来使用, 相比之下数组就严格多了, 每个子项都是统一的类型. document.getElementsByName, document.getElementsByTagName, document.formName.elements 这类方法所得到的结果都是集合.

[心云意水]

回复人： meizz(梅花雪(新婚蜜月中)) ( ) 信誉：686 2003-11-12 09:38:00 得分:0
集合比数组要松散的多, 集合里每个子项的类型可以不同, 集合只是把某些元素放在一起作为一类来使用, 相比之下数组就严格多了, 每个子项都是统一的类型.

这个，在js环境中，数组丧失了这种特定的要求吧？由于js是弱语言，所有的变量都是var类型，所以数组也能存放不同类型的东西。
所以我觉得在js范围内，数组和集合的界限好像很模糊？？？

[slumcherry]

上面的例子都是利用this关键字来确定哪一个被选上. 能不能不用this, 通过遍历所有checkbox来确定哪个是最后选上的?

[心云意水]

哎~~你好执著啊！其实如果你仔细看看我的代码，那个<form name="f1" action="" method="post" onclick="check(this)">中的this根本就没有用上！你要数组，就给你个数组的。其实就是一个取栈顶元素的问题。
<script>
var checked=new Array()
function check()
{var i,j=0;
var el = f1.elements;
var count = el.length;
var obj=event.srcElement;
checked[checked.length]=obj;
for (i=0;i<count;i++)
if (el[i].type=="checkbox" && el[i].checked==true)
j++;
if(j>5)
{alert("最多只能選取5個");
checked[checked.length-1].checked=false;
}
}
</script>
<form name="f1" action="" method="post" onclick="check()">
<input type="checkbox" >
<input type="checkbox" >
<input type="checkbox" >
<input type="checkbox" >
<input type="checkbox" >
<input type="checkbox" >
<input type="checkbox" >
<input type="checkbox" >
<input type="checkbox" >
</form>

[slumcherry]

多谢指点,看来小弟还有很长的路要走. 感谢斑竹的热心!!!!!