手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >基于JS实现checkbox全选功能实例代码
基于JS实现checkbox全选功能实例代码
摘要:需求:要求实现点击全选选中所有菜单,再次点击全选取消选中。此功能经常会用户,下面小编给大家分享下实现代码,一起看看吧!效果图如下:点击全选之...

需求:要求实现点击全选选中所有菜单,再次点击全选取消选中。此功能经常会用户,下面小编给大家分享下实现代码,一起看看吧!

效果图如下:

点击全选之前:

基于JS实现checkbox全选功能实例代码1

点击全选之后:

基于JS实现checkbox全选功能实例代码2

再次点击全选之后:

基于JS实现checkbox全选功能实例代码1

代码如下:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="checkbox">全选 <input type="checkbox" name="nation">唱歌 <input type="checkbox" name="nation">跳舞 <input type="checkbox" name="nation">书法 </body> <script type="text/javascript"> var k=0; function quanxuan(){ var s=document.getElementsByName("nation"); if(k%2==0) { for(var i=0;i< s.length;i++) { s[i].checked=true; } k++; } else { for(var j=0;j< s.length;j++) { s[j].checked=false; } k++; } } </script> </html>

以上所述是小编给大家介绍的基于JS实现checkbox全选功能实例代码,希望对大家有所帮助,如果大家有任何疑问请给我们留言,小编会及时回复大家的。在此也非常感谢大家对查字典教程网的支持!

【基于JS实现checkbox全选功能实例代码】相关文章:

JS实现简洁、全兼容的拖动层实例

jquery判断至少有一个checkbox被选中的方法

JS实现屏蔽shift,Ctrl,alt等功能键的方法

JS实现模拟风力的雪花飘落效果

JQuery实现带排序功能的权限选择实例

JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例

在JavaScript应用中使用RequireJS来实现延迟加载

js实现简单锁屏功能实例

判断checkbox选择的个数 多浏览器

JS实现简单路由器功能的方法

精品推荐
分类导航