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

叁歲伎倆 2022-02-15 08:06 328阅读 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