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吗?
Feb 24 Javascript
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
Apr 21 Javascript
JavaScript 错误处理与调试经验总结
Aug 10 Javascript
Jquery replace 字符替换实现代码
Dec 02 Javascript
js 获取后台的字段 改变 checkbox的被选中的状态 代码
Jun 05 Javascript
JS中图片缓冲loading技术的实例代码
Aug 29 Javascript
加载列表时jquery获取ul中第一个li的属性
Nov 02 Javascript
Ajax中解析Json的两种方法对比分析
Jun 25 Javascript
Vuex之理解state的用法实例
Apr 19 Javascript
Layui Form 自定义验证的实例代码
Sep 14 Javascript
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
Vue3.0写自定义指令的简单步骤记录
Jun 27 Vue.js
不间断循环滚动效果的实例代码(必看篇)
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下的权限算法的实现
2007/04/28 PHP
php 向访客和爬虫显示不同的内容
2009/11/09 PHP
javascript实现轮显新闻标题链接
2007/08/13 Javascript
“不能执行已释放的Script代码”错误的原因及解决办法
2007/09/09 Javascript
extjs 学习笔记(三) 最基本的grid
2009/10/15 Javascript
javascript 验证日期的函数
2010/03/18 Javascript
SeaJS入门教程系列之SeaJS介绍(一)
2014/03/03 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
2014/08/01 Javascript
跟我学习javascript的隐式强制转换
2015/11/16 Javascript
Bootstrap网格系统详解
2016/04/26 Javascript
深入浅析JavaScript的API设计原则
2016/06/14 Javascript
vue2 自定义动态组件所遇到的问题
2017/06/08 Javascript
Angular实现预加载延迟模块的示例
2017/10/12 Javascript
webpack引入eslint配置详解
2018/01/22 Javascript
jQuery实现的鼠标响应缓冲动画效果示例
2018/02/13 jQuery
说说node中的可读流和可写流的区别
2018/06/01 Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
2018/11/14 Javascript
vue踩坑记录之数组定义和赋值问题
2019/03/20 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
2020/04/07 Javascript
[07:54]DOTA2-DPC中国联赛 正赛 iG vs VG 选手采访
2021/03/11 DOTA
Python编程实战之Oracle数据库操作示例
2017/06/21 Python
Python实现简单遗传算法(SGA)
2018/01/29 Python
Python 类的魔法属性用法实例分析
2019/11/21 Python
Pytorch实现基于CharRNN的文本分类与生成示例
2020/01/08 Python
tensorflow的计算图总结
2020/01/12 Python
Pytorch中的自动求梯度机制和Variable类实例
2020/02/29 Python
中国最大隐形眼镜网上商城:视客眼镜网
2016/10/30 全球购物
雅萌 (YA-MAN) :日本美容家电领域的龙头企业
2017/05/12 全球购物
英国皇室御用百货:福南梅森(Fortnum & Mason)
2017/12/03 全球购物
销售文员的岗位职责
2013/11/20 职场文书
小区门卫工作职责
2013/12/14 职场文书
公证委托书模板
2014/04/03 职场文书
民政局标准版离婚协议书
2014/12/01 职场文书
食品安全责任书范本
2015/05/09 职场文书
爱国影片观后感
2015/06/18 职场文书
2016年五一促销广告语
2016/01/28 职场文书