JS 控制全选复选框

暗夜螃蟹 2010-11-17 12:32:39 


<html>



<head>







<script type="text/javascript">







function chkall(){



   

    for(var i=0;i <document.form1.elements.length;i++)  { 

        var   e=document.form1.elements[i]; 

         

                 if(e.checked==false){

                    e.checked=true;

                   }else{

                    e.checked=false;

                  }

     }

} 











var check_flag=true;

function  chk(){



 var chkall=document.getElementsByName('chks');  

 

   

      if(check_flag==true){ 

              if(chkall.length>0){

                  for(var i=0;i<chkall.length;i++){

                        if(chkall[i].checked==false){               

                           chkall[i].checked=true;

                          }

                   else if(chkall[i].checked==true){

                           chkall[i].checked=true;

                           

                              check_flag=false;

                          

                         }



                      }

               }

           

         }

   else if(check_flag==false){

                 if(chkall.length>0){

                  for(var i=0;i<chkall.length;i++){

                        if(chkall[i].checked==false){

                           chkall[i].checked=false;

                          }

                        else if(chkall[i].checked==true){

                           chkall[i].checked=false;

                           check_flag=true;

                         }

                      }

               }





         }





  }



</script></head>

<body>

<form name="form1" >

<input type="button" name="chkes"  onclick="chkall()" value="chkall"/>

<br>

<input type="button" name="chkesss"  onclick="chk()" value="用这个"/>

<br>

<input type="checkbox" name="chks" value="1"/>

<br/>

<input type="checkbox" name="chks" value="2"/>

<br/>

<input type="checkbox" name="chks" value="3"/>

<br/>

<input type="checkbox" name="chks" value="4"/>

<br/>

<input type="checkbox" name="chks" value="5"/>

<br/>

<input type="checkbox" name="chks" value="6"/>

<br/>

<input type="checkbox" name="chks" value="7"/>

<br/>

<input type="checkbox" name="chks" value="8"/>

<br/>

<input type="checkbox" name="chks" value="9"/>

<br/>



</form>



</body>

</html>


点击“用这个”按钮来做测试；
要求：1.复选框中一个都没有选中则全部全中；
2.复选框中选中了几个也全部选中；
3.再次点击消除所有选中；然后第四次点击时全部全中以此为循环；
上述功能我都实现了。但是总要点击多次才能得到我想要的结果。能不能做到没有点空的情况；请高手们
给点建议！！！

...全文
116 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
hch126163 2010-11-17
  • 打赏
  • 举报
 回复
function chkall(){
var chkall=document.getElementsByName('chks');

for(var i=0;i <chkall.length;i++) {
chkall[i].checked=true;
}
}


1.复选框中一个都没有选中则全部全中；
2.复选框中选中了几个也全部选中； 这句话怎么理解？
你是要做反选吗？

如果是反选：

function chkall(){
var chkall=document.getElementsByName('chks');

for(var i=0;i <chkall.length;i++) {
chkall[i].checked=！chkall[i].checked;
}
}
碧海情天-赵亮 2010-11-17
  • 打赏
  • 举报
 回复
标记变量的使用，看着简单，但要用好，必须有完全的把握。
hookee 2010-11-17
  • 打赏
  • 举报
 回复 


<html>

<head>

<script type="text/javascript">



function chkall(){

    for(var i=0;i <document.form1.elements.length;i++)  { 

        var   e=document.form1.elements[i]; 

                 if(e.checked==false){

                    e.checked=true;

                   }else{

                    e.checked=false;

                  }

     }

} 



var check_flag=true;

function  chk(){

	var chkall = document.getElementsByName('chks');

	var n = 0;

	for(var i=0;i<chkall.length;i++) if(chkall[i].checked) n++;

	if(n==chkall.length) for(var i=0;i<chkall.length;i++) chkall[i].checked = false;

	else for(var i=0;i<chkall.length;i++) chkall[i].checked = true;

}



</script></head>

<body>

<form name="form1" >

<input type="button" name="chkes"  onclick="chkall()" value="chkall"/>

<br>

<input type="button" name="chkesss"  onclick="chk()" value="用这个"/>

<br>

<input type="checkbox" name="chks" value="1"/>

<br/>

<input type="checkbox" name="chks" value="2"/>

<br/>

<input type="checkbox" name="chks" value="3"/>

<br/>

<input type="checkbox" name="chks" value="4"/>

<br/>

<input type="checkbox" name="chks" value="5"/>

<br/>

<input type="checkbox" name="chks" value="6"/>

<br/>

<input type="checkbox" name="chks" value="7"/>

<br/>

<input type="checkbox" name="chks" value="8"/>

<br/>

<input type="checkbox" name="chks" value="9"/>

<br/>



</form>



</body>

</html>
碧海情天-赵亮 2010-11-17
  • 打赏
  • 举报
 回复
改了下，效率在微观上能好点
<META NAME="Author" CONTENT="theforever(碧海情天),赵亮">

<meta http-equiv="blog" content="blog.csdn.net/theforever">

<meta http-equiv="email" content="theforever@163.com">

<META NAME="Keywords" CONTENT="theforever,csdn,碧海情天,赵亮">

<script type="text/javascript">

function chkall(){

    for(var i=0;i <document.form1.elements.length;i++)  {

        var   e=document.form1.elements[i];

                 if(e.checked==false){

                    e.checked=true;

                   }else{

                    e.checked=false;

                  }

     }

}

function  theforever(){

	var chks=document.getElementsByName('chks');

	var check_num;

	if(chks.length>0){

		check_num=0;

		for(var i=0;i<chks.length;i++){

			if(chks[i].checked==true) check_num++;

		}

		check_num=!(check_num==chks.length);

		for(var i=0;i<chks.length;i++){

			chks[i].checked=check_num;

		}

	}

}

</script></head>

<body>

<form name="form1" >

<input type="button" name="chkOthers"  onclick="反选()" value="反选"/>

<br>

<input type="button" name="chkAll"  onclick="theforever()" value="用这个"/>

<br>

<input type="checkbox" name="chks" value="1"/><br/>

<input type="checkbox" name="chks" value="2"/><br/>

<input type="checkbox" name="chks" value="3"/><br/>

<input type="checkbox" name="chks" value="4"/><br/>

</form>

</body>

</html>
碧海情天-赵亮 2010-11-17
  • 打赏
  • 举报
 回复 
<META NAME="Author" CONTENT="theforever(碧海情天),赵亮">

<meta http-equiv="blog" content="blog.csdn.net/theforever">

<meta http-equiv="email" content="theforever@163.com">

<META NAME="Keywords" CONTENT="theforever,csdn,碧海情天,赵亮">

<script type="text/javascript">

function chkall(){

    for(var i=0;i <document.form1.elements.length;i++)  {

        var   e=document.form1.elements[i];

                 if(e.checked==false){

                    e.checked=true;

                   }else{

                    e.checked=false;

                  }

     }

}

function  theforever(){

	var chks=document.getElementsByName('chks');

	var check_num;

	if(chks.length>0){

		check_num=0;

		for(var i=0;i<chks.length;i++){

			if(chks[i].checked==true) check_num++;

		}

		for(var i=0;i<chks.length;i++){

			chks[i].checked=check_num==chks.length?false:true;

		}

	}

}

</script></head>

<body>

<form name="form1" >

<input type="button" name="chkOthers"  onclick="反选()" value="反选"/>

<br>

<input type="button" name="chkAll"  onclick="theforever()" value="用这个"/>

<br>

<input type="checkbox" name="chks" value="1"/><br/>

<input type="checkbox" name="chks" value="2"/><br/>

<input type="checkbox" name="chks" value="3"/><br/>

<input type="checkbox" name="chks" value="4"/><br/>

</form>

</body>

</html>
暗夜螃蟹 2010-11-17
  • 打赏
  • 举报
 回复
不是反选，是如果点击了部分复选框后，再点击BUTTON 。变成复选框全部选中。
js实现全选的复选框
js实现全选的复选框
jquery 、js实现复选框 (全选、反选)
jquery 、js实现复选框 (全选、反选)功能··
javascript 实现复选框全选/取消功能
javascript 实现复选框全选/取消功能
js 实现 复选框全选（二）
js 实现 复选框全选（二）! 值得下载看看!资源免费,大家分享!!
javascript复选框全选
javascript 复选框全选，复选框全选，复选框全选
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章