JS:全选和被选（思路解析 详细）

于 2021-09-14 11:50:04 发布
阅读量215 收藏 1
点赞数
分类专栏： javascript试题 文章标签： html5 css html js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_59519449/article/details/120284293
版权
这篇博客详细解析了JavaScript中实现全选和反选的功能。通过一个封装函数，利用this参数（作为that引用）配合for循环遍历DOM元素，根据全选/全不选的状态来控制每个选项的选中状态。对于反选，思路是取当前选中状态的相反值，通过inps[i].checked=!inps.checked实现。最后，通过调用封装函数完成操作。
摘要由CSDN通过智能技术生成

<1全选/全不选点击事件  思路：
            给一个封装函数，使用this 的形参that，因为多选相当于一个数组，需要用一个for循环,循环到每个dom元素，用全选</全不选本身选中的状态控制

<2 反选事件的思路：
            一个封装函数的相反取值，也就是和全选和全不选的值是相反的
            inps[i].checked=!inps.checked最后封装函数返回值即可，fn（）


                

        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  一染星辰
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
JS中的全选练习（包含思路）

				
			

			

				

					Fantasc的博客
				

				

					08-04
					
					305
					
				

			

		

		

			
				
以下时多选框的全选、全不选、反选和提交的练习，注意看注释，将思路理清楚
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial

			
		

	



                

              
                



	

		

			

				
					
JS实现全选及部分全选

				
			

			

				

					张俊辉
				

				

					12-14
					
					514
					
				

			

		

		

			
				
首先呢，先把checkbox搞出来：2. 其次呢，来二斤JS代码全选 
 
部分全选

			
		

	



                


  
              

                


	

		

			

				
					
javascript/jQuery案例之选择、全选、部分选择

				
			

			

				

					qq_40176258的博客
				

				

					12-01
					
					172
					
				

			

		

		

			
				
javascript实现：


&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0&qu

			
		

	





	

		

			

				
					
Vue的全选功能实现思路

				
			

			

				

					weixin_30692143的博客
				

				

					05-20
					
					338
					
				

			

		

		

			
				
全选功能的实现主要分两步：
1. 点击全选框选中所有选择框。
2. 当所有选择框都被选中时，勾选全选框。
详细思路：
1.点击全选框选中所有选择框：
　　给全选框绑定一个值，然后添加change时间，当全选框的值改变时给所有选择框的值赋与全选框的值。
2.当所有选择框都被选中时，选中全选框：
　　给所有选择框都添加change事件，当某个选择框的值改变时，检查所有选择框的状态：只...

			
		

	



		

			
		



	

		

			

				
					
“全选与全不选“功能的一种简单写法（js代码）

				
			

			

				

					weixin_46931499的博客
				

				

					10-15
					
					302
					
				

			

		

		

			
				
勾选全选
$("#topcheckbox").click(function(){
	$("#tBody input[type='checkbox']").prop("checked",this.checked);
});

勾选其他的复选框
$("#tBody").on("click","input[type='checkbox']",function () {
	if($("#tBody input[type='checkbox']:checked").size() == $("#tBody input[

			
		

	





	

		

			

				
					
复选框全选与全不选操作实现思路

				
			

			

				

					09-05
				

			

		

		

			
				
本文将详细解析如何使用JavaScript实现复选框的全选与全不选操作。  首先，我们需要创建HTML结构，包含一个用于全选/全不选的主复选框（checkItem）和多个可选的复选框（item）。以下是一个简单的HTML示例：  ```...

			
		

	





	

		

			

				
					
选择框全选反选 思路解析

				
			

			

				

					weixin_47558015的博客
				

				

					04-29
					
					462
					
				

			

		

		

			
				
<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .wrap {
            width: .

			
		

	





	

		

			

				
					
juqery实现复选框全选/反选demo源码

				
			

			

				

					07-21
				

			

		

		

			
				
如果两者相等，说明所有复选框都被选中，那么“全选”按钮也应该被选中；反之，如果数量不相等，则“全选”按钮应取消选中。  根据提供的文件名"demo"，这可能是一个包含这个功能的演示代码文件。通常，这样的文件会...

			
		

	





	

		

			

				
					
Jquery的全选

				
			

			

				

					06-07
				

			

		

		

			
				
本文详细介绍了如何使用JQuery实现复选框全选功能的具体步骤和技术细节。通过上述代码示例，我们不仅实现了基础的功能需求，还增强了用户体验并确保了良好的性能表现。对于ASP.NET项目的前端开发而言，这是一个非常...

			
		

	





	

		

			

				
					
JQuery全选的代码思路

				
			

			

				

					weixin_42141323的博客
				

				

					04-14
					
					259
					
				

			

		

		

			
				
思路:
1、当点击'全选'按钮时，页面中所有的复选框都应该为选中状态，

   1.1、当再次点击'全选'按钮时，所有的复选框应该是非选中状态。

   1.2、当点击子复选框时，'全选'按钮应该是非选中状态。

2、当选中当前页面的所有子复选框时，'全选'按钮应该是'选中'状态。

3、点点击'全不选'按钮时，当前页面的所有复选框置为非选中状态。

4、当点击'反选'按钮时，当前...

			
		

	





	

		

			

				
					
html选择和全选,JavaScript CheckBox实现全选和部分选择

				
			

			

				

					weixin_29848477的博客
				

				

					06-04
					
					123
					
				

			

		

		

			
				
1 2 3     4         function BatchAddToBasket() {5             var questionNums = '';6             var checkboxs = document.getElementsByName('question');7             for (var i = 0; i < checkboxs...

			
		

	





	

		

			

				
					
实现全选功能三种方法

				
			

			

				

					Mrf_w的博客
				

				

					01-07
					
					2174
					
				

			

		

		

			
				

实现全选功能三种方法




全选效果



.bg{

background-image: url(images/list_bg.gif);

background-repeat: no-repeat;

width: 730px;

}

td{text-align:center;

font-size:13px;

line-height

			
		

	





	

		

			

				
					
详细的JavaScript知识梳理和经典的一百个例题,让你掌握JavaScript

				
			

			

				

					qq_43623970的博客
				

				

					04-21
					
					1516
					
				

			

		

		

			
				
这里先做一下JavaScript知识点的梳理,具体的可领取资料
JavaScript语法：

js语法.png
DOM操作：

DOM操作.png


数据类型


面向对象


继承


闭包


插件


作用域


跨域


原型链


模块化


自定义事件


内存泄漏


事件机制


异步装载回调


模板引擎


JSON


ajax

面向对象.png


JavaScript...

			
		

	





	

		

			

				
					
JavaScript知识整理

				
			

			

				

					tuzi007a的博客
				

				

					04-27
					
					6926
					
				

			

		

		

			
				
快乐的棒棒糖~~资料纯手打。也算自己又重新复习了一遍吧。希望对小伙伴们有所帮助23333~
JavaScript
计算机基础（了解)
数据存储单位
bit byte kb Gb Tb
如图：

java和javascript的关系：
两者毫无关系。类似于雷锋和雷峰塔的关系。
script是脚本的意思。javascript 是脚本语言，会逐行解释执行。简称JS。
html / css / js三者的...

			
		

	





	

		

			

				
					
页面实现全选和批量操作

					
热门推荐

				
			

			

				

					渣渣想逆袭
				

				

					01-23
					
					1万+
					
				

			

		

		

			
				
全选的思路是：遍历标签下的type为checkbox的input标签，改变这些checkbox的check状态和点击全选的状态一样

批量操作的思路是：用js获取记录中的id用逗号拼接，传到后台执行批量操作的处理



全选js：




$("#checkAll").click(function() {
		var rows = $("#content").find('input');
		...

			
		

	





	

		

			

				
					
JavaScript基础 全选/取消全选

				
			

			

				

					weixin_44944007的博客
				

				

					12-05
					
					184
					
				

			

		

		

			
				
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            

			
		

	





	

		

			

				
					
javascript之全选、反选和不选

				
			

			

				

					mr_tangshuai的博客
				

				

					11-09
					
					263
					
				

			

		

		

			
				
请选择你熟悉的编程语言
		Java
		JavaScript
		C++
		T-SQL
		PHP
		
		全选
		反选
		不选
		
			function checkAll(flag,f){
				//获取所有复选框对象
				var cks = document.getElementsByName('lang');
				for(var i = 0;i<cks.length;

			
		

	





	

		

			

				
					
javascript之选框的全选与复选

				
			

			

				

					weixin_44575854的博客
				

				

					11-11
					
					192
					
				

			

		

		

			
				
javascript之选框的全选与复选
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录javascript之选框的全选与复选前言一、案例分析二、代码1.HTML2.css3.js部分

前言
提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

提示：以下是本篇文章正文内容，下面案例可供参考
一、案例分析
1.全选和取消取消全选做法，让下面所有复选框的CheckBox

			
		

	





	

		

			

				
					
JavaScript实现checkbox操作：全选、部分选、反选

				
			

			

				

					
				

			

		

		

			
				
"此文档提供了一个关于JavaScript中Checkbox使用方法的实例演示，主要展示了全选、部分选和反选的功能。通过jQuery库实现了表格中Checkbox的操作，包括奇偶行背景色的设置，并提供了相关的HTML和JavaScript代码示例...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值