{ Hauy`s blog } Inpeck.com

专注于用户体验、交互设计、web前端技术和web标准化建设。

js学习:多选及反选框的实现

2006.07.13 - 暂无评论 »

将目标指向表单:form=document.select //这里的select对应表单的name
遍历表单元素:for( var i=0 ;i<form.elements.length ;i++)
取得事件发生的对象:event.srcElement
复选框的选中:form.elements[i].checked
反选:!form.elements[i].checked

<script language=”javascript”>
function selectIt(){
 form=document.form1
 action=event.srcElement.name
 for(var i=0 ;i<form.elements.length;i++){
 if(form.elements$[$i$]$.name==”checkbox”){

e=form.elements[i]
e.checked=(action==”selectAll”)?(form.selectAll.checked):(!e.checked)
}
}
}
</script>
<form name=”form1″>
<p>
全 选
<input type=”checkbox” name=”selectAll” value=”checkbox” onClick=”selectIt()”><br>
反 选
<input type=”checkbox” name=”invest” value=”checkbox” onClick=”selectIt()”><br>
Item1
<input type=”checkbox” name=”checkbox” value=”checkbox”>
<br>
Item2
<input type=”checkbox” name=”checkbox” value=”checkbox”><br>
Item3
<input type=”checkbox” name=”checkbox” value=”checkbox”><br>
Item4
<input type=”checkbox” name=”checkbox” value=”checkbox”><br>
Item5
<input type=”checkbox” name=”checkbox” value=”checkbox”>
</p>
</form>[/code]

分类: 客户端脚本 -

引用 (Trackbacks)

使用这个网址对这篇文章进行引用。


评论

订阅这篇文章评论的RSS聚合
暂时没有评论

发表您的评论


(必填)
添加blog地址

搜索

输入关键词并按回车进行搜索

页面

文档


按月存档:

订阅

通过FeedBurner订阅
通过Feedsky订阅

链接


我的 Google Reader 分享

我的饭否

同步



程序提供:WordPress 主题设计:Dalarnas

{ Hauy`s blog } Inpeck.com © 2008 — 保留部分权利