首頁 > web前端 > js教程 > checkbox实现全选的多种方法 不断更新[原创]_表单特效

checkbox实现全选的多种方法 不断更新[原创]_表单特效

WBOY
發布: 2016-05-16 19:27:48
原創
1232 人瀏覽過

复制代码 代码如下:

<script> <BR>//第一种方法 <BR>function selectall1() <BR>{ <BR> var a = document.getElementsByTagName("input"); <BR> if(a[0].checked==true){ <BR> for (var i=0; i<a.length; i++) <BR> if (a[i].type == "checkbox") a[i].checked = false; <BR> } <BR> else <BR> { <BR> for (var i=0; i<a.length; i++) <BR> if (a[i].type == "checkbox") a[i].checked = true; <BR> } <BR>} <br><br>//第二种方法 <br><br>function selectall2() { <BR> var tform = document.forms['form1']; <BR> for (var i=0;i<tform.length;i++) <BR> { <BR> var e = tform.elements[i]; <BR> if (e.type == "checkbox") <BR> e.checked = !e.checked; <BR> } <BR>} <br><br>//第三种方法,结合上述两种方法 <BR>function selectall3() <BR>{ <BR> var a = document.getElementsByTagName("input"); <BR> for (var i=0; i<a.length; i++) <BR> if (a[i].type == "checkbox") a[i].checked =!a[i].checked; <BR> } <BR>//第四种方法 <BR>function selectall4(id){ //用id区分 <BR>var tform=document.forms['form1']; <BR>for(var i=0;i<tform.length;i++){ <BR>var e=tform.elements[i]; <BR>if(e.type=="checkbox" && e.name==id) e.checked=!e.checked; <BR>} <BR>} <BR>//第五种方法 <BR>function selectall(theform,thename){ //theform指定的form,thename是checkbox的name属性 <BR>var tform=document.forms[theform]; <BR>document.getElementById("thewen").value='反选'; <BR>for(var i=0;i<tform.length;i++){ <BR> var e=tform.elements[i]; <BR> if(e.type=='checkbox' && e.name==thename)e.checked=!e.checked; <BR> } <BR>} <BR></script>

  
  






[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
 
PS:上述三种方法,都可实现效果,但如果想实现(全选|反选),就需要根据要求添加
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板