基于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 相关文章推荐
JavaScript对表格或元素按文本,数字或日期排序的方法
May 26 Javascript
基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)
Dec 25 Javascript
Bootstrap进度条组件知识详解
May 01 Javascript
JavaScript中的跨浏览器事件操作的基本方法整理
May 20 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
Sep 14 Javascript
浅谈Javascript中的函数、this以及原型
Oct 09 Javascript
JavaScript自定义文本框光标
Mar 05 Javascript
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
Oct 25 Javascript
vue webpack打包后图片路径错误的完美解决方法
Dec 07 Javascript
Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码
May 18 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中ADODB类详解
2008/03/25 PHP
php格式化json函数示例代码
2016/05/12 PHP
js中window.open()的所有参数详细解析
2014/01/09 Javascript
javascript实现手机震动API代码
2015/08/05 Javascript
JavaScrip常见的一些算法总结
2015/12/28 Javascript
jQuery 移动端artEditor富文本编辑器
2016/01/11 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
2016/03/07 Javascript
JS判断图片是否加载完成方法汇总(最新版)
2016/05/13 Javascript
AngularJS 面试题集锦
2016/09/06 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
2017/03/08 Javascript
Vue实战之vue登录验证的实现代码
2017/10/31 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
2018/04/14 Javascript
vue.js 实现输入框动态添加功能
2018/06/25 Javascript
layui获取选中行数据的实例讲解
2018/08/19 Javascript
使用原生js编写一个简单的框选功能方法
2019/05/13 Javascript
Layui表格监听行单双击事件讲解
2019/11/14 Javascript
Echarts实现单条折线可拖拽效果
2019/12/19 Javascript
微信小程序实现手指拖动选项排序
2020/04/22 Javascript
[01:31](回顾)杀出重围,决战TI之巅
2014/07/01 DOTA
Python操作串口的方法
2015/06/17 Python
Python使用matplotlib绘制正弦和余弦曲线的方法示例
2018/01/06 Python
聊聊Python中的pypy
2018/01/12 Python
解决pycharm运行时interpreter为空的问题
2018/10/29 Python
Python删除n行后的其他行方法
2019/01/28 Python
Python Web框架之Django框架文件上传功能详解
2019/08/16 Python
python 进程的几种创建方式详解
2019/08/29 Python
如何用Python 加密文件
2020/09/10 Python
师范应届生语文教师求职信
2013/10/29 职场文书
销售文员的岗位职责
2013/11/20 职场文书
土木工程师职业规划范文
2014/03/07 职场文书
租房协议书范文
2014/08/20 职场文书
2014最新版群众路线四风整改措施
2014/09/24 职场文书
个园导游词
2015/02/04 职场文书
房地产置业顾问岗位职责
2015/04/11 职场文书
python使用PySimpleGUI设置进度条及控件使用
2021/06/10 Python
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/06 PostgreSQL