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

复制代码 代码如下:

<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>

  
  

<script language="javascript"> //第一种方法 function selectall1() { var a = document.getElementsByTagName("input"); if(a[0].checked==true){ for (var i=0; i<a.length; i++) if (a[i].type == "checkbox") a[i].checked = false; } else { for (var i=0; i<a.length; i++) if (a[i].type == "checkbox") a[i].checked = true; } } //第二种方法 function selectall2() { var tform = document.forms['form1']; for (var i=0;i<tform.length;i++) { var e = tform.elements[i]; if (e.type == "checkbox") e.checked = !e.checked; } } //第三种方法，结合上述两种方法 function selectall3() { var a = document.getElementsByTagName("input"); for (var i=0; i<a.length; i++) if (a[i].type == "checkbox") a[i].checked =!a[i].checked; } //第四方法 function selectall4(id){ //用id区分 var tform=document.forms['form1']; for(var i=0;i<tform.length;i++){ var e=tform.elements[i]; if(e.type=="checkbox" && e.name==id) e.checked=!e.checked; } } //第五种方法 function selectall5(theform,thename){ var tform=document.forms[theform]; //document.getElementById("thewen").value='反选'; for(var i=0;i<tform.length;i++){ var e=tform.elements[i]; if(e.type=='checkbox' && e.name==thename)e.checked=!e.checked; } } </script> <form id="form1" name="form1" method="post" action=""> <input type="checkbox" name="sid" value="1"> <input type="checkbox" name="sid" value="2"> <input type="checkbox" name="sid" value="3"> <input type="checkbox" name="sid" value="4"> <input name="thes" type="button" onclick="javascript:selectall1()" value="第一种"> <input name="thes" type="button" onclick="javascript:selectall2()" value="第二种"> <input name="thes" type="button" onclick="javascript:selectall3()" value="第三种"> <input name="thes" type="button" onclick="javascript:selectall4('sid')" value="第四种"> <input name="thes" type="button" onclick="javascript:selectall5('form1','sid')" value="第五种"> </form>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

 
PS:上述三种方法，都可实现效果，但如果想实现(全选|反选)，就需要根据要求添加