javascript应用:实现复选框全选/全不选切换

2016-02-19 15:20 8 1 收藏

每个人都希望每天都是开心的,不要因为一些琐事扰乱了心情还,闲暇的时间怎么打发,关注图老师可以让你学习更多的好东西,下面为大家推荐javascript应用:实现复选框全选/全不选切换,赶紧看过来吧!

【 tulaoshi.com - Web开发 】

input type=checkbox name=mm value=a onclick="checkItem(this, ''mmAll'')"br
input type=checkbox name=mm value=b onclick="checkItem(this, ''mmAll'')"br
input type=checkbox name=mm value=c onclick="checkItem(this, ''mmAll'')"br
input type=checkbox name=mm value=d onclick="checkItem(this, ''mmAll'')"br
input type=checkbox name=mm value=e onclick="checkItem(this, ''mmAll'')"brbr
input type=checkbox name=mmAll onclick="checkAll(this, ''mm'')"全选与不全选的切换

script language=Javascript
function checkAll(e, itemName)
{
  var aa = document.getElementsByName(itemName);
  for (var i=0; iaa.length; i++)
   aa[i].checked = e.checked;
}
function checkItem(e, allName)
{
  var all = document.getElementsByName(allName)[0];
  if(!e.checked) all.checked = false;
  else
  {
    var aa = document.getElementsByName(e.name);
    for (var i=0; iaa.length; i++)
     if(!aa[i].checked) return;
    all.checked = true;
  }
}
/script

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

    ps:(当然若那个全选框是其它的控件比如是一个按钮,或者一个链接什么的话,那复选框里的 checkItem 点击事件可以去掉,以免出错)

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

来源:http://www.tulaoshi.com/n/20160219/1609442.html

延伸阅读
标签: Web开发
在用表单设计调查表时,为了减少用户的操作,使用选择框是一个好主意,在HTML的input标记中有两种选择框,即单选框和复选框,两者的区别是单选框中的选项用户只能选择一项,而复选框中的选项用户可以任意选择多项,甚至全选。请看下面的例子: 下面给出这个例子的源代码,结合代码来讲各参数的设置: form name="form1" 你是...
标签: word
Word2010如何插入复选框   在日常使用word过程中,常常需要制作一些信息表,有些字段需要进行选择,如性别中的男,女;在做问题调查问卷时,复选框用到的就比较多了,那在word2010中如何插入复选框呢? 步骤 1、打开需要插入复选框的word文件,打开文件中的选项界面。word2010中的开发工具默认是隐藏的,需要先打开它,因...
标签: 电脑入门
平时在编辑word时会需要制作打勾的复选框,也许很多朋友还不知道怎么设置,本教程就为大家介绍具体操作过程,下面就一起来看看吧。我们以Word2010版来演示word复选框打勾的整个操作过程。 第一步,单击开发工具控件复选框内容控件,word会自动在当前光标位置插入一个复选框控件,如下图第三标识的。 第二步,选中上图第三标识的复选框,wo...
标签: PHP
如果一个表单中有多个同名复选框,在提交到php时却只有一个值,而并不像asp那样是一串用逗号分割的值。有一个很简单的方法来解决:将复选框的name后面加上[],例如:<input type=\"checkbox\" name=\"ccc\" value=\"1\" 改为:<input type=\"checkbox\" name=\"ccc[]\" ...
标签: Web开发
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" head     title全选,不全选,反选/title     script src="js/jquery.js" type="text/javascript"/script     script lang...

经验教程

579

收藏

76
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部