JavaScript实现全选、反选、不选功能

叁歲伎倆 2022-02-15 08:06 303阅读 0赞

实现代码：

<!DOCTYPE html>
    <html>
    <meta charset='utf-8' />
    <body>
    <input type='checkbox' name='id' />哈哈<br/>
    <input type='checkbox' name='id' />哈哈<br/>
    <input type='checkbox' name='id' />哈哈<br/>
    <input type='checkbox' name='id' />哈哈<br/>
    <input type='button' name='id' value='全选' onclick='return fun()' />
    <input type='button' name='id' value='取消全选' onclick='return fan()' />
    <input type='button' name='id' value='反选' onclick='return fans()' />
    <script type="text/javascript">
    function fun()
    {
    	var a=document.getElementsByName('id');
    	for(var i=0;i<a.length;i++)
    	{
    		a[i].checked=true;
    	}
    }
    function fan()
    {
    	var a=document.getElementsByName('id');
    	for(var i=0;i<a.length;i++)
    	{
    		a[i].checked=false;
    	}
    }
    function fans()
    {
    	var a=document.getElementsByName('id');
    	for(var i=0;i<a.length;i++)
    	{
    		if(a[i].checked==true)
    		{
    			a[i].checked=false;	
    		}
    		else
    		{
    			a[i].checked=true;
    		}
    	}
    }
    </script>
    </body>
    </html>

实现效果：

![在这里插入图片描述][20190424101054714.png]  
![在这里插入图片描述][20190424101102570.png]

摘自：[https://blog.csdn.net/qq\_42249896/article/details/82867631][https_blog.csdn.net_qq_42249896_article_details_82867631]

[20190424101054714.png]: /images/20220215/eadbd1d345894f81bb2a048d7668ed31.png
[20190424101102570.png]: /images/20220215/d2f6f7f1a3e04aadad5501c5bfa701bb.png
[https_blog.csdn.net_qq_42249896_article_details_82867631]: https://blog.csdn.net/qq_42249896/article/details/82867631

发表评论取消回复

表情：

评论列表（有 0 条评论，303人围观）

还没有评论，来说两句吧...

相关阅读

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

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

缺乏、安全感/ 2024年04月22日 22:30/ 0 赞/ 79 阅读

相关 javascript全选、反选

<!DOCTYPE html> <html> <head> <title>test</title> </head> <body

谁借莪１个温暖的怀抱￠/ 2022年12月29日 00:15/ 0 赞/ 187 阅读

相关 jQurey全选，反选，不全选功能实现

html部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>全选，反选，不全选</t

╰+哭是因爲堅強的太久メ/ 2022年08月21日 10:53/ 0 赞/ 246 阅读

相关 JQuery实现全选、全不选和反选功能

项目中需要做一个全选、全不选和反选的功能。刚接到这个需求的时候，心想很简单的一个功能，几行代码就能搞定，然而事实并非如此。下面就把我的思路说一下：

旧城等待，/ 2022年07月14日 14:09/ 0 赞/ 318 阅读

相关全选反选JavaScript实现

html代码 <label for="all">全选</label><input type="checkbox" id="all"> <div id="box

Myth丶恋晨/ 2022年05月27日 12:36/ 0 赞/ 236 阅读

相关 javascript实现全选，反选功能

今天看项目发现有全选和反选的按钮实现，比较感兴趣，从网上搜索了自己实现了一下实现的方式就是在我们的按钮中设置响应的事件，然后在我们的函数中，通过定义的多选按钮的na

淡淡的烟草味﹌/ 2022年05月17日 10:48/ 0 赞/ 241 阅读

相关 JavaScript复选框（全选/全不选反选）

实例代码： 1 JS代码： <script type="text/javascript"> window.οnlοad=function()\{

一时失言乱红尘/ 2022年05月17日 01:46/ 0 赞/ 280 阅读

相关 JavaScript实现全选、反选、不选功能

实现代码： <!DOCTYPE html> <html> <meta charset='utf-8' /> <body> <input

叁歲伎倆/ 2022年02月15日 08:06/ 0 赞/ 304 阅读

相关 javascript 复选框（checkbox）全选/全不选/反选

其实很简单，先分析一下效果分析：　　1，点击全选/全不选　　　全选文字变成全不选，同时全选按钮和所有按钮选中状态，否则，则相反　　2，点击反选按钮

た入场券/ 2021年11月19日 14:24/ 0 赞/ 587 阅读

相关全选-反选-全不选

简单易懂，上手快 $(function() \{ //全选 $("\all").click(function()

绝地灬酷狼/ 2021年10月03日 02:48/ 0 赞/ 548 阅读