基于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 相关文章推荐
最新优化收藏到网摘代码(digg,diigo)
Feb 07 Javascript
Javascript 强制类型转换函数
May 17 Javascript
js常用代码段整理
Nov 30 Javascript
Javascript动画的实现原理浅析
Mar 02 Javascript
js网页滚动条滚动事件实例分析
May 05 Javascript
javascript实时显示当天日期的方法
May 20 Javascript
探讨JavaScript标签位置的存放与功能有无关系
Jan 15 Javascript
jquery对Json的各种遍历方法总结(必看篇)
Sep 29 Javascript
javascript 秒表计时器实现代码
Mar 09 Javascript
vue.js全局API之nextTick全面解析
Jul 07 Javascript
详解Vue.js Mixins 混入使用
Sep 15 Javascript
JavaScript原型继承和原型链原理详解
Feb 04 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
认识并使用PHP超级全局变量
2010/01/26 PHP
PHP学习笔记(二) 了解PHP的基本语法以及目录结构
2014/08/04 PHP
PHP数组与对象之间使用递归实现转换的方法
2015/06/24 PHP
Yii2中YiiBase自动加载类、引用文件方法分析(autoload)
2016/07/25 PHP
Laravel框架执行原生SQL语句及使用paginate分页的方法
2018/08/17 PHP
Laravel框架运行出错提示RuntimeException No application encryption key has been specified.解决方法
2019/04/02 PHP
Javascript的IE和Firefox兼容性汇编
2006/07/01 Javascript
javascript 函数调用的对象和方法
2010/07/01 Javascript
jQuery 操作option的实现代码
2011/03/03 Javascript
node.js express安装及示例网站搭建方法(分享)
2016/08/22 Javascript
angular route中使用resolve在uglify压缩后问题解决
2016/09/21 Javascript
php输出全部gb2312编码内的汉字方法
2017/03/04 Javascript
Express+Nodejs 下的登录拦截实现代码
2017/07/01 NodeJs
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
2019/09/11 Javascript
详解vue中使用transition和animation的实例代码
2020/12/12 Vue.js
详解Vue.js 可拖放文本框组件的使用
2021/03/03 Vue.js
Python中的函数作用域
2018/05/07 Python
Python使用dict.fromkeys()快速生成一个字典示例
2019/04/24 Python
python替换字符串中的子串图文步骤
2019/06/19 Python
对django中foreignkey的简单使用详解
2019/07/28 Python
Python 多线程,threading模块,创建子线程的两种方式示例
2019/09/29 Python
解决tensorflow由于未初始化变量而导致的错误问题
2020/01/06 Python
Ranorex通过Python将报告发送到邮箱的方法
2020/01/12 Python
纯CSS3制作页面切换效果的实例代码
2019/05/30 HTML / CSS
阿拉伯世界最大的电子卖场:Souq埃及
2016/08/01 全球购物
Booking.com美国:全球酒店预订网站
2017/04/18 全球购物
.NET笔试题(20个问题)
2016/02/02 面试题
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2014/01/19 面试题
授权委托书样本
2014/04/03 职场文书
求职意向书
2014/07/29 职场文书
父亲节活动策划方案
2014/08/24 职场文书
实践论读书笔记
2015/06/29 职场文书
公司人事管理制度
2015/08/05 职场文书
2016年端午节红领巾广播稿
2015/12/18 职场文书
解决Golang中ResponseWriter的一个坑
2021/04/27 Golang
Python基础之hashlib模块详解
2021/05/06 Python