当前位置: 首页 > 编程笔记 >

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

慕兴平
2023-03-14
本文向大家介绍基于JS实现checkbox全选功能实例代码,包括了基于JS实现checkbox全选功能实例代码的使用技巧和注意事项,需要的朋友参考一下

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

效果图如下:

点击全选之前:

点击全选之后:

再次点击全选之后:

代码如下:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
</head> 
<body> 
<input type="checkbox" onclick="quanxuan()">全选 
<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实现复选框的全选、全不选反选功能代码实例,包括了Js实现复选框的全选、全不选反选功能代码实例的使用技巧和注意事项,需要的朋友参考一下 主要是用遍历的方法查找元素,然后通过改变checked的属性来选择,为true则是选中状态,为false则是未选状态 实现代码 结果 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍基于jQuery实现仿51job城市选择功能实例代码,包括了基于jQuery实现仿51job城市选择功能实例代码的使用技巧和注意事项,需要的朋友参考一下 前些文章用写过,省市县三级联动,但是感觉选择的时候不够直观,现在改进了下,效果如下图 以上内容给大家介绍了基于jQuery实现仿51job城市选择功能实例代码,希望对大家有所帮助!

  • 本文向大家介绍jQuery实现checkbox列表的全选、反选功能,包括了jQuery实现checkbox列表的全选、反选功能的使用技巧和注意事项,需要的朋友参考一下   我们在做列表的时候经常会遇到全选,反选进行批量处理问题,例如:   我当时就是简单的实现了,然后想封装到公共的js中,封装的太烂,不好意思贴出来了(就是把实现代码之间放到公共js中,然后每个页面都用固定的id,class,现在想

  • 本文向大家介绍MFC实现全屏功能代码实例,包括了MFC实现全屏功能代码实例的使用技巧和注意事项,需要的朋友参考一下 windows应用程序中有很多的播放器都有快捷键控制窗口以全屏幕的方式显示。MFC实现给应用程序加上全屏幕的功能,并不需要很多的代码,比如给一个基于对话框的应用程序加上全屏功能只需要以下少量代码就可以实现了。 实现代码如下所示:

  • 本文向大家介绍javascript实现checkbox复选框实例代码,包括了javascript实现checkbox复选框实例代码的使用技巧和注意事项,需要的朋友参考一下 本文实例介绍了javascript实现checkbox复选框实例代码以及对checkbox复选框进行美化操作,分享给大家供大家参考,具体内容如下 1、checkbox复选框进行美化操作 复选框默认外表的美观度差强人意,能够满足美

  • 本文向大家介绍基于 Immutable.js 实现撤销重做功能的实例代码,包括了基于 Immutable.js 实现撤销重做功能的实例代码的使用技巧和注意事项,需要的朋友参考一下 浏览器的功能越来越强大,许多原来由其他客户端提供的功能渐渐转移到了前端,前端应用也越来越复杂。许多前端应用,尤其是一些在线编辑软件,运行时需要不断处理用户的交互,提供了撤消重做功能来保证交互的流畅性。不过为一个应用实现撤