js html css实现复选框全选与反选


Posted in Javascript onOctober 09, 2016

本文实例为大家分享了js复选框全选与反选实现代码,供大家参考,具体内容如下

<html>
 <head>
 <title>html+css+js实现复选框全选与反选</title>
 <meta http-equiv="content-type" content="text/html;charset=utf-8" />
 <meta name="keywords" content="js,笔试题目" />
 <style type="text/css">
  table,tr,td
  {
  border:1px solid red;
  }
 </style>
 <script type="text/javascript">
  function quanxuan()
  {
  for(var i=1;i<=3;i++)
  {
   var cbox_id="cb"+i;
   var cbox=document.getElementById(cbox_id);
   //alert(cbox.value);
   if(document.getElementById("cb_quanxuan").checked)
   cbox.checked=true;
   else
   cbox.checked=false;;
  }
  }
  function fanxuan()
  {
  for(var i=1;i<=3;i++)
  {
   var cbox_id="cb"+i;
   var cbox=document.getElementById(cbox_id);
   if(document.getElementById("cb_fanxuan").checked)
   {//选中反选框
   if(cbox.checked)
    cbox.checked=false;
   else
    cbox.checked=true;
   }
   else
   {
   if(cbox.checked)
    cbox.checked=false;
   else
    cbox.checked=true;
   }
  }
  }
 </script>
 
 </head>
 <body>
 <form id="form1">
  <table>
  <tr>
   <td><input type="checkbox" id="cb_quanxuan" onclick="quanxuan()" />全选</td>
   <td>复选框全选案例</td>
   <td> </td>
   <td> </td>
  </tr>
  
  <tr>
   <td><input type="checkbox" id="cb1" value="1" />1</td>
   <td>我是傻逼1</td>
   <td> </td>
   <td> </td>
  </tr>
  
  <tr>
   <td><input type="checkbox" id="cb2" value="2" />2</td>
   <td>我是傻逼2</td>
   <td> </td>
   <td> </td>
  </tr>
  
  <tr>
   <td><input type="checkbox" id="cb3" value="3" />3</td>
   <td>我是傻逼3</td>
   <td> </td>
   <td> </td>
  </tr>
  
  <tr>
   <td><input type="checkbox" id="cb_fanxuan" onclick="fanxuan()" />反选</td>
   <td>反选案例</td>
   <td> </td>
   <td> </td>
  </tr>
  </table>
 </form>
 </body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中onmouse事件在div中失效问题的解决方法
Jan 09 Javascript
jquery 插件学习(四)
Aug 06 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
Feb 26 Javascript
JavaScript中按位“异或”运算符使用介绍
Mar 14 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
Oct 18 Javascript
简单实现IONIC购物车功能
Jan 10 Javascript
javascript 单例模式详解及简单实例
Feb 14 Javascript
详解webpack和webpack-simple中如何引入css文件
Jun 28 Javascript
一步步教你利用Canvas对图片进行处理
Sep 19 Javascript
vue项目首屏打开速度慢的解决方法
Mar 31 Javascript
node.js使用yargs处理命令行参数操作示例
Feb 11 Javascript
uniapp实现横向滚动选择日期
Oct 21 Javascript
不间断循环滚动效果的实例代码(必看篇)
Oct 08 #Javascript
关于JavaScript和jQuery的类型判断详解
Oct 08 #Javascript
js基本算法:冒泡排序,二分查找的简单实例
Oct 08 #Javascript
javascript中获取元素标签中间的内容的实现方法
Oct 08 #Javascript
Jquery和Js获得元素标签名称的方法总结
Oct 08 #Javascript
JS获取html元素的标记名实现方法
Oct 08 #Javascript
js获取元素的标签名实现方法
Oct 08 #Javascript
You might like
php去除重复字的实现代码
2011/09/16 PHP
php中cookie的使用方法
2014/03/29 PHP
php构造函数与析构函数
2016/04/23 PHP
PHP解耦的三重境界(浅谈服务容器)
2017/03/13 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
laravel 实现上传图片到本地和前台访问示例
2019/10/21 PHP
Laravel框架下的Contracts契约详解
2020/03/17 PHP
JavaScript面象对象设计
2008/04/28 Javascript
jQuery 可以拖动的div实现代码 脚本之家修正版
2009/06/26 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
2014/01/02 Javascript
深入理解Javascript里的依赖注入
2014/03/19 Javascript
js实现网页随机切换背景图片的方法
2014/11/01 Javascript
JavaScript简单修改窗口大小的方法
2015/08/03 Javascript
jquery实现最简单的滑动菜单效果代码
2015/09/12 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
2018/01/21 Javascript
JS/HTML5游戏常用算法之追踪算法实例详解
2018/12/12 Javascript
Python实现测试磁盘性能的方法
2015/03/12 Python
如何在Python中编写并发程序
2016/02/27 Python
深入了解Django View(视图系统)
2019/07/23 Python
flask框架jinja2模板与模板继承实例分析
2019/08/01 Python
python多线程+代理池爬取天天基金网、股票数据过程解析
2019/08/13 Python
django实现用户注册实例讲解
2019/10/30 Python
使用python的turtle绘画滑稽脸实例
2019/11/21 Python
NumPy排序的实现
2020/01/21 Python
Python安装OpenCV的示例代码
2020/03/05 Python
django处理select下拉表单实例(从model到前端到post到form)
2020/03/13 Python
sklearn的predict_proba使用说明
2020/06/28 Python
Pretty Little Thing美国:时尚女性服饰
2018/08/27 全球购物
实习生自荐信范文
2013/11/13 职场文书
七年级历史教学反思
2014/02/05 职场文书
《自然之道》教学反思
2014/02/11 职场文书
我的中国梦演讲稿600字
2014/08/19 职场文书
工作汇报材料难写?方法都在这里了!
2019/07/01 职场文书
nginx反向代理时如何保持长连接
2021/03/31 Servers
vue-cli3.x配置全局的scss的时候报错问题及解决
2022/04/30 Vue.js