ホームページ > 記事 > ウェブフロントエンド > checkbox实现全选的多种方法不断更新[原创]_表单特效

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

WBOYオリジナル: 2016-05-16 19:27:481224ブラウズ

//第三种方法，结合上述两种方法 
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:上述三种方法，都可实现效果，但如果想实现(全选|反选)，就需要根据要求添加

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：javascript实现二级级联菜单的简单制作次の記事：奇妙的Javascript图片放大镜_图象特效

続きを見る

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

関連記事

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