基于javascript实现checkbox复选框实例代码


Posted in Javascript onJanuary 28, 2016

本文实例讲解了javascript实现checkbox复选框的详细代码,分享给大家供大家参考,具体内容如下

效果图:

基于javascript实现checkbox复选框实例代码

具体代码:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
function select_all(obj)
{
  //取得由所有hobby构成的一个数组对象
  //如果表单中,存在多个同名的name,将产生一个数组
  var arr = document.form1.hobby;
  if(obj.checked)
  {
    //为true执行代码
    for(var i=0;i<arr.length;i++)
    {
      arr[i].checked = true;
    }
  }else
  {
    //为false执行代码
    for(var i=0;i<arr.length;i++)
    {
      arr[i].checked = false;
    }
  }
}
function select_no_all()
{
  //取得所有的hobby对象
  var arr = document.form1.hobby;
  for(var i=0;i<arr.length;i++)
  {
    if(arr[i].checked)
    {
      //如果选中,则取消
      arr[i].checked = false;
    }else
    {
      //如果没选中,则选中
      arr[i].checked = true;
    }
  }
}
</script>
</head>

<body>
<form name="form1">
<fieldset>
  <legend>选择你感兴趣的类别</legend>
  <input type="checkbox" name="hobby" value="音乐" />音乐
  <input type="checkbox" name="hobby" value="看书" />看书
  <input type="checkbox" name="hobby" value="体育" />体育
  <input type="checkbox" name="hobby" value="足球" />足球
  <input type="checkbox" name="hobby" value="电脑" />电脑<br />
  <input type="checkbox" name="hobby" value="小说" />小说
  <input type="checkbox" name="hobby" value="文学" />文学
  <input type="checkbox" name="hobby" value="动漫" />动漫
  <input type="checkbox" name="hobby" value="经济" />经济
  <input type="checkbox" name="hobby" value="电影" />电影<br />
  <input type="checkbox" name="hobby" value="美术" />美术
  <input type="checkbox" name="hobby" value="管理" />管理
  <input type="checkbox" name="hobby" value="历史" />历史
  <input type="checkbox" name="hobby" value="旅游" />旅游
  <input type="checkbox" name="hobby" value="戏剧" />戏剧
</fieldset>
  <input type="checkbox" onclick="select_all(this)" value="全选" />全选
  <input type="checkbox" onclick="select_no_all()" value="反选" />反选
</form>

</body>
</html>

希望本文所述对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
jquery select(列表)的操作(取值/赋值)
Aug 06 Javascript
Firebug入门指南(Firefox浏览器)
Aug 21 Javascript
说明你的Javascript技术很烂的五个原因
Apr 26 Javascript
下载文件个别浏览器文件名乱码解决办法
Mar 19 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
Jul 09 Javascript
原生js的数组除重复简单实例
May 24 Javascript
微信小程序中单位rpx和rem的使用
Dec 06 Javascript
javascript实现简单的可随机变色网页计算器示例
Dec 30 Javascript
angular中不同的组件间传值与通信的方法
Nov 04 Javascript
基于casperjs和resemble.js实现一个像素对比服务详解
Jan 10 Javascript
vue.js watch经常失效的场景与解决方案
Jan 07 Vue.js
JavaScript this关键字的深入详解
Jan 14 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
Jan 28 #Javascript
JS+CSS实现DIV层的展开、收缩效果
Jan 28 #Javascript
js+canvas绘制五角星的方法
Jan 28 #Javascript
js+html5实现的自由落体运动效果代码
Jan 28 #Javascript
js判断上传文件后缀名是否合法
Jan 28 #Javascript
Angular中$compile源码分析
Jan 28 #Javascript
实例讲解JS中setTimeout()的用法
Jan 28 #Javascript
You might like
一个ftp类(ini.php)
2006/10/09 PHP
用php实现批量查询清除一句话后门的代码
2008/01/20 PHP
memcache命令启动参数中文解释
2014/01/13 PHP
10款PHP开源商城系统汇总介绍
2015/07/23 PHP
在Mac上编译安装PHP7的开发环境
2015/07/28 PHP
PHP页面输出时js设置input框的选中值
2016/09/30 PHP
PHP实现截取中文字符串不出现?号的解决方法
2016/12/29 PHP
利用PHP判断是手机移动端还是PC端访问的函数示例
2017/12/14 PHP
js 创建快捷方式的代码(fso)
2010/11/19 Javascript
js数组转json并在后台对其解析具体实现
2013/11/20 Javascript
Javascript实现简单的富文本编辑器附演示
2014/06/16 Javascript
JavaScript实现点击自动选择TextArea文本的方法
2015/07/02 Javascript
vue-cli系列之vue-cli-service整体架构浅析
2019/01/14 Javascript
vue-cli3 取消eslint校验代码的解决办法
2020/01/16 Javascript
在nodejs中创建child process的方法
2021/01/26 NodeJs
[01:11:15]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python实现的一只从百度开始不断搜索的小爬虫
2013/08/13 Python
Python解析excel文件存入sqlite数据库的方法
2016/11/15 Python
python3之微信文章爬虫实例讲解
2017/07/12 Python
python验证码识别教程之利用滴水算法分割图片
2018/06/05 Python
python递归实现快速排序
2018/08/18 Python
Pytorch学习之torch用法----比较操作(Comparison Ops)
2020/06/28 Python
在pycharm中文件取消用 pytest模式打开的操作
2020/09/01 Python
快速一键生成Python爬虫请求头
2021/03/04 Python
24个canvas基础知识小结
2014/12/17 HTML / CSS
如何在Oracle中查看各个表、表空间占用空间的大小
2015/10/31 面试题
一套比较完整的软件测试人员面试题
2012/05/13 面试题
优秀干部获奖感言
2014/01/31 职场文书
《彩色世界》教学反思
2014/04/12 职场文书
小学爱国卫生月活动总结
2014/06/30 职场文书
护理专业自荐信范文
2015/03/06 职场文书
2015年七夕爱情寄语
2015/03/24 职场文书
2015年医药代表工作总结
2015/04/25 职场文书
2015年骨干教师工作总结
2015/05/26 职场文书
绿里奇迹观后感
2015/06/15 职场文书
实操Python爬取觅知网素材图片示例
2021/11/27 Python