JavaScript全选复选框checkbox效果

最新推荐文章于 2024-04-02 19:39:43 发布
最新推荐文章于 2024-04-02 19:39:43 发布
阅读量264 收藏 1
点赞数
文章标签： javascript ViewUI

大家在使用邮箱收发邮件时通常会使用这么一个批量操作，比如将第n页所有旧的邮件全部删除，

大部分mail程序都提供了 这样一个功能——全选复选框checkbox，当你点击全选前面的复选框时，会

中所有的复选框。很人性化，很便捷的一个操作，那么它的工作原理是怎样的呢？其实也蛮简单的，有以下几个步骤：

1.通过脚本获取指定的元素集合，其实就是所有的复选框组成的一个数组，把这个数组对象保存到一个变量里。

2.使用for语句遍历数组对象，同时给数组中的每个元素添加上单击的选中事件checked，这样所有的复选框就被选中了。

下面是具体代码(提示:您可以复制代码内容保存到记事本里,并修改后缀名为.htm即可看到效果)：

 

  1. <html> 
  2.  <head>  
  3.  <script type="text/javascript" language="javascript">  
  4.  function checkAll(o) { 
  5.   var mytable = document.getElementById("table1").getElementsByTagName("input");  
  6.   for(var i=1,ci;ci=mytable[i++];) {  
  7.  ci.checked = o.checked;  
  8.  } 
  9.  } 
  10.  </script>  
  11.  </head>  
  12.  
  13.  <body>  
  14.  <table id="table1">  
  15.  <tr>  
  16.  <th><input type='checkbox' onclick='javascript: checkAll(this)'>全选</th>  
  17.  </tr>  
  18.  <tr>  
  19.  <td><input type='checkbox'></td>  
  20.  </tr>  
  21.  <tr>  
  22.  <td><input type='checkbox'></td>  
  23.  </tr>  
  24.  <tr>  
  25.  <td><input type='checkbox'></td>  
  26.  </tr>  
  27.  <tr>  
  28.  <td><input type='checkbox'></td>  
  29.  </tr>  
  30.  </table>  
  31.  </body>  
  32.  </html>  

                

        

        




    




    

      

        

            

              
                
                  morning2009
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    1
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
JS如何实现勾选全部复选框和不全选复选框

				
			

			

				

					itclanCoder
				

				

					02-01
					
					4495
					
				

			

		

		

			
				
前言在一些后台管理系统里面,针对全选,复选框是一个很常见的操作,复选框可以执行多项选择的一种控件,有时，为了方便用户选中所有的复选框,网页界面会提供一个选中所有复选框的功能,怎么实现一个复选框全部被选中的效果呢示例效果allcheckbox原生Js实现全选的效果,复选框是否被勾选,是由它的checked属性决定的,因此,实现本例效果的关键就是找到所有对应的复选框,然后将其它的checked属性设置...

			
		

	



                

              
                



	

		

			

				
					
JavaScript多选框checkbox传递

				
			

			

				

					hellogull
				

				

					04-11
					
					5625
					
				

			

		

		

			
				
工作中遇到的多选框传递问题，实际上需要将多选框用js拼成一个传，作为string传递过去，需要在表单中加一个隐藏的值，回写的时候，再用js解析此串，然后给多选框赋值，用到代码如下：//将多选框拼串

function getCheckboxStrNew(objName){ 
    var objList  = document.getElementsByName(objName);
	var r

			
		

	



                


  
              

                


	

		

			

				
					
复选框选中效果(一键全选，全部选中全选才被选择）

				
			

			

				

					m0_63647278的博客
				

				

					06-18
					
					219
					
				

			

		

		

			
				
script>i++) {var time=0;i++) {break;time++;</script>

			
		

	





	

		

			

				
					
JavaScript实现全选、反选功能（Vue全选、反选，js原生全选、反选）

					
最新发布

				
			

			

				

					weixin_65793170的博客
				

				

					04-02
					
					2030
					
				

			

		

		

			
				
首先为复选框添加了一个事件监听器，当用户点击该复选框时，将触发该事件；然后在事件处理函数中，通过遍历所有复选框，将它们的选中状态设置为与复选框相同的状态。

			
		

	



		

			
		



	

		

			

				
					
js实现复选框全选、反选、取消功能

				
			

			

				

					lyq0011的博客
				

				

					08-26
					
					4872
					
				

			

		

		

			
				
1、获取全选按钮对象。2、全选按钮触发时候，让input复选框遍历所有对象。3、全选：checked属性值设为true。反选：checked属性值取反！。取消：checked属性值设为false

			
		

	





	

		

			

				
					
JavaScript：复选框的全选和取消全选

				
			

			

				

					weixin_56283510的博客
				

				

					09-27
					
					632
					
				

			

		

		

			
				
思路简洁，内容注释充实，若发现错误请联系我

			
		

	





	

		

			

				
					
JS实现checkbox全选

				
			

			

				

					chen254810107的专栏
				

				

					04-19
					
					768
					
				

			

		

		

			
				
function checkall(){
var allCheck = $("#allboxs").is("checked");// 取得全选checkbox是否被选中，如果选中为true，未选中为false
if(allCheck){
var nameboxs = $("input[name^='boxs']");// 获取name值为boxs的所有input
for(i=0; i
n

			
		

	





	

		

			

				
					
利用Bootstrap实现表格复选框checkbox全选

				
			

			

				

					08-31
				

			

		

		

			
				
请注意，我们在`<thead>`中的第一列添加了一个空的`<th>`元素，用于放置全选复选框。在`<tbody>`中，每行的第一列我们添加了一个单独的复选框。  接下来，我们需要用JavaScript（这里我们可以使用jQuery）来实现全选...

			
		

	





	

		

			

				
					
jquery复选框CHECKBOX全选、反选

				
			

			

				

					10-30
				

			

		

		

			
				
在jQuery中，处理复选框（CHECKBOX）的全选和反选操作是常见的需求，尤其是在数据筛选或批量操作的场景下。这里介绍一个官方提供的函数`CheckboxGroup`，它简化了这一过程。该函数在2018年6月18日的最新版本中发布，...

			
		

	





	

		

			

				
					
javascript实现checkbox复选框实例代码

				
			

			

				

					10-22
				

			

		

		

			
				
在JavaScript中，我们可以利用DOM操作和事件处理来实现复选框的各种交互功能，如美化、全选/取消全选等。下面我们将详细探讨如何使用JavaScript实现这些功能。  首先，让我们看看如何对复选框进行美化。原始的HTML复...

			
		

	





	

		

			

				
					
js 实现 复选框全选（二）

				
			

			

				

					03-31
				

			

		

		

			
				
js 实现 复选框全选（二）!
值得下载看看!资源免费,大家分享!!

			
		

	





	

		

			

				
					
一个实现复选框全选的JavaScript 例子

				
			

			

				

					12-04
				

			

		

		

			
				
一个实现复选框全选的JavaScript 例子,
如何使用javaScript 使网页上的复选框被选中

			
		

	





	

		

			

				
					
js 实现 复选框全选（一）

				
			

			

				

					03-31
				

			

		

		

			
				
js 实现 复选框全选（一）!
值得下载看看!资源免费,大家分享!!

			
		

	





	

		

			

				
					
JS复选框checkbox动画特效下载.zip

				
			

			

				

					07-05
				

			

		

		

			
				
JS复选框checkbox动画特效下载是一款可以使原生的checkbox复选框被点击的时候，产生一些有趣的动画效果。

			
		

	





	

		

			

				
					
javascript复选框全选

				
			

			

				

					04-21
				

			

		

		

			
				
javascript 复选框全选，复选框全选，复选框全选

			
		

	





	

		

			

				
					
JQUERY复选框CHECKBOX全选,取消全选

				
			

			

				

					12-09
				

			

		

		

			
				
在这个场景中，我们关注的是如何使用 jQuery 实现复选框（CHECKBOX）的全选和取消全选功能。这在数据筛选、批量操作等场景中非常常见。  首先，让我们详细解析给定的代码：  ```html <script type="text/javascript...

			
		

	





	

		

			

				
					
layui复选框的全选与取消实现方法

				
			

			

				

					10-16
				

			

		

		

			
				
1. 使用 Layui 的 HTML 结构创建复选框，包括一级全选复选框和二级具体选项复选框。 2. 引入 Layui 的 JavaScript 库，并在文档加载完成后初始化事件监听器。 3. 使用 `form.on` 方法监听复选框的点击事件，根据事件...

			
		

	





	

		

			

				
					
JavaScript实现复选框全选

				
			

			

				

					weixin_46379561的博客
				

				

					09-06
					
					1059
					
				

			

		

		

			
				
复选框全选
在JavaScript中，我们可以利用标签属性name可以重复的特性来实现批量修改name属性值相同的标签属性值。这是因为有着重复name属性的标签是使用一个数组来表示的，只需要获取到该数组，再对数组进行遍历，然后改变每一个数组元素的checked状态即可实现复选框全选。
运行如图，当选中第一个全选的选项时，其它选项也会被选中；当取消选中时，其它选项也会一同取消选中。

代码如下：
<!DOCTYPE html>
<html>
	<head>
		<me

			
		

	





	

		

			

				
					
【纯JavaScript 制作多选框逻辑实现】

				
			

			

				

					阿牛哥的博客
				

				

					07-20
					
					272
					
				

			

		

		

			
				
【纯JavaScript 制作多选框】

			
		

	





	

		

			

				
					
layui treeGrid通过js代码全选复选框

				
			

			

				

					06-10
				

			

		

		

			
				
您可以使用以下代码来实现 layui treeGrid 全选复选框：  ```javascript // 全选复选框 $('#checkAll').on('click', function() {  var checked = $(this).prop('checked');  $('.layui-table-body .layui-form-...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值