javascript中checkbox使用方法实例演示


Posted in Javascript onNovember 19, 2015

本文实例讲述了JavaScript实现的伸展收缩型菜单代码。分享给大家供大家参考。具体如下:
运行效果截图如下:

(1)全选

javascript中checkbox使用方法实例演示

(2)部分选

javascript中checkbox使用方法实例演示

(3)反选(全不选)

javascript中checkbox使用方法实例演示

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Table中的CheckBox</title> 
<script type="text/javascript" src="script/jquery-1.10.1.js"></script> 
<style type="text/css"> 
  body 
  { 
   width:100%; 
   height:100%; 
   font-size:12px; 
  } 
  table 
  { 
   width:80%; 
   height:100%; 
  } 
  .tr_odd 
  { 
   background: #EBF2FE; 
  } 
  .tr_even 
  { 
   background: #B4CDE6; 
  } 
  .tab_body 
  { 
   text-align: center; 
  } 
</style> 
<script type="text/javascript"> 
  $(function(){ 
    $("tr:odd").addClass("tr_odd");//奇数行背景色 
    $("tr:even").addClass("tr_even");//偶数行背景色 
     
    $("#ckb_head").click(function(){ 
      if($(this).prop("checked")){//全选 
        $("input[name='ckb']").attr("checked","true"); 
      }else{//全不选 
        $("input[name='ckb']").removeAttr("checked"); 
      } 
    }); 
  }); 
   
  //部分选 
  function ckbSome(){ 
    var flag = true; 
    var selectedCkb = document.getElementsByName("ckb"); 
    for(var i=0;i<selectedCkb.length;i++){ 
      if(selectedCkb[i].checked == false){ 
        flag = false; 
      } 
      if(flag){ 
        document.getElementsByName("check_box")[0].checked=true; 
      }else{ 
        document.getElementsByName("check_box")[0].checked=false; 
      } 
    } 
  } 
</script> 
</head> 
<body> 
  <table> 
   <tr style="background: #CCCCCC;text-align: center;"> 
    <th><input type="checkbox" id="ckb_head" name="check_box"/></th> 
    <th>学号</th> 
    <th>姓名</th> 
    <th>年龄</th> 
    <th>性别</th> 
   </tr> 
   <tr class="tab_body"> 
    <td><input type="checkbox" name="ckb" onclick="ckbSome()"/></td> 
    <td>2013060101</td> 
    <td>张华</td> 
    <td>23</td> 
    <td>男</td> 
   </tr> 
   <tr class="tab_body"> 
    <td><input type="checkbox" name="ckb" onclick="ckbSome()"/></td> 
    <td>2013060102</td> 
    <td>赵雪</td> 
    <td>24</td> 
    <td>女</td> 
   </tr> 
   <tr class="tab_body"> 
    <td><input type="checkbox" name="ckb" onclick="ckbSome()"/></td> 
    <td>2013060103</td> 
    <td>孙旭</td> 
    <td>21</td> 
    <td>男</td> 
   </tr> 
   <tr class="tab_body"> 
    <td><input type="checkbox" name="ckb" onclick="ckbSome()"/></td> 
    <td>2013060104</td> 
    <td>李姝</td> 
    <td>20</td> 
    <td>女</td> 
   </tr> 
   <tr class="tab_body"> 
    <td><input type="checkbox" name="ckb" onclick="ckbSome()"/></td> 
    <td>2013060105</td> 
    <td>公孙旭</td> 
    <td>22</td> 
    <td>男</td> 
   </tr> 
   <tr class="tab_body"> 
    <td><input type="checkbox" name="ckb" onclick="ckbSome()"/></td> 
    <td>2013060106</td> 
    <td>李枝花</td> 
    <td>24</td> 
    <td>女</td> 
   </tr> 
   <tr class="tab_body"> 
    <td><input type="checkbox" name="ckb" onclick="ckbSome()"/></td> 
    <td>2013060107</td> 
    <td>魏征</td> 
    <td>22</td> 
    <td>男</td> 
   </tr> 
   <tr class="tab_body"> 
    <td><input type="checkbox" name="ckb" onclick="ckbSome()"/></td> 
    <td>2013060108</td> 
    <td>施礼</td> 
    <td>20</td> 
    <td>女</td> 
   </tr> 
   <tr class="tab_body"> 
    <td><input type="checkbox" name="ckb" onclick="ckbSome()"/></td> 
    <td>2013060109</td> 
    <td>王志</td> 
    <td>23</td> 
    <td>男</td> 
   </tr> 
   <tr class="tab_body"> 
    <td><input type="checkbox" name="ckb" onclick="ckbSome()"/></td> 
    <td>2013060104</td> 
    <td>方小许</td> 
    <td>20</td> 
    <td>女</td> 
   </tr> 
  </table> 
</body> 
</html>

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

Javascript 相关文章推荐
一步一步制作jquery插件Tabs实现过程
Jul 06 Javascript
jQuery判断iframe中元素是否存在的方法
May 11 Javascript
JAVASCRIPT模式窗口中下载文件无法接收iframe的流
Oct 11 Javascript
JS简单实现元素复制示例附图
Nov 19 Javascript
深入理解JS中的substr和substring
Apr 26 Javascript
JS实现的幻灯片切换显示效果
Sep 07 Javascript
vue + socket.io实现一个简易聊天室示例代码
Mar 06 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
Jul 21 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
iView框架问题整理小结
Oct 16 Javascript
jQuery层叠选择器用法实例分析
Jun 28 jQuery
vue-video-player视频播放器使用配置详解
Oct 23 Javascript
jquery实现表格隔行换色效果
Nov 19 #Javascript
javascript设计简单的秒表计时器
Sep 05 #Javascript
跟我学习javascript的定时器
Nov 19 #Javascript
分享纯手写漂亮的表单验证
Nov 19 #Javascript
javascript获取系统当前时间的方法
Nov 19 #Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
Nov 19 #Javascript
javascript电商网站抢购倒计时效果实现
Nov 19 #Javascript
You might like
仿Aspnetpager的一个PHP分页类代码 附源码下载
2012/10/08 PHP
php全局变量和类配合使用深刻理解
2013/06/05 PHP
解析php安全性问题中的:Null 字符问题
2013/06/21 PHP
PHP简单实现断点续传下载的方法
2015/09/25 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
YII框架学习笔记之命名空间、操作响应与视图操作示例
2019/04/30 PHP
javascript 折半查找字符在数组中的位置(有序列表)
2010/12/09 Javascript
ScrollDown的基本操作示例
2013/06/09 Javascript
调用DOM对象的focus使文本框获得焦点
2014/02/19 Javascript
JavaScript中for循环的使用详解
2015/06/03 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
2015/10/04 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
2015/12/02 Javascript
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
2016/02/25 Javascript
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
2016/07/07 Javascript
Ajax实现不刷新取最新商品
2017/03/01 Javascript
WebSocket实现简单客服聊天系统
2017/05/12 Javascript
vue单页应用中如何使用jquery的方法示例
2017/07/27 jQuery
JS库之Particles.js中文开发手册及参数详解
2017/09/13 Javascript
python在windows下实现备份程序实例
2014/07/04 Python
Python中__call__用法实例
2014/08/29 Python
python字符串编码识别模块chardet简单应用
2015/06/15 Python
python 实现红包随机生成算法的简单实例
2017/01/04 Python
Python实现基于PIL和tesseract的验证码识别功能示例
2018/07/11 Python
python3基于OpenCV实现证件照背景替换
2018/07/18 Python
Python实现随机生成任意数量车牌号
2020/01/21 Python
利用Python脚本实现自动刷网课
2020/02/03 Python
python利用proxybroker构建爬虫免费IP代理池的实现
2021/02/21 Python
大学自荐信
2013/12/12 职场文书
大学生创业计划书的格式要求
2013/12/29 职场文书
军训鉴定表自我鉴定
2014/02/13 职场文书
出纳担保书范文
2014/04/02 职场文书
单位租房协议书范本
2014/12/04 职场文书
2014年前台接待工作总结
2014/12/05 职场文书
《开国大典》教学反思
2016/02/16 职场文书
女人创业励志语录,句句蕴含能量,激发你的潜能
2019/08/20 职场文书
解决MySQL报“too many connections“错误
2022/04/19 MySQL