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 相关文章推荐
网站上面有这种切换效果
Jun 26 Javascript
JavaScript中的闭包原理分析
Mar 08 Javascript
Javascript 面向对象编程(一) 封装
Aug 28 Javascript
jquery validate poshytip 自定义样式
Nov 26 Javascript
如何使用Javascript正则表达式来格式化XML内容
Jul 04 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
Oct 09 Javascript
ExtJS的拖拽效果示例
Dec 09 Javascript
javasript实现密码的隐藏与显示
May 08 Javascript
JS实现字符串去重及数组去重的方法示例
Apr 21 Javascript
详解webpack的clean-webpack-plugin插件报错
Oct 16 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
Dec 28 Javascript
Javascript中的解构赋值语法详解
Apr 02 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
工厂模式在Zend Framework中应用介绍
2012/07/10 PHP
php实现用于计算执行时间的类实例
2015/04/18 PHP
详解PHP安装mysql.so扩展的方法
2016/12/31 PHP
PHP Swoole异步Redis客户端实现方法示例
2019/10/24 PHP
一段非常简单的让图片自动切换js代码
2006/11/10 Javascript
解决jQuery插件tipswindown与hintbox冲突
2010/11/05 Javascript
javascript将数组插入到另一个数组中的代码
2013/01/10 Javascript
jQuery根据元素值删除数组元素的方法
2015/06/24 Javascript
js简单实现标签云效果实例
2015/08/06 Javascript
jquery遍历json对象集合详解
2016/05/18 Javascript
Javascript中级语法快速入手
2016/07/30 Javascript
原生js实现焦点轮播图效果
2017/01/12 Javascript
js和jquery中获取非行间样式
2017/05/05 jQuery
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
2017/11/21 Javascript
利用JavaScript的%做隔行换色的实例
2017/11/25 Javascript
vue自定义指令的创建和使用方法实例分析
2018/12/04 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
2020/01/08 Javascript
JS 数组基本用法入门示例解析
2020/01/16 Javascript
JS如何判断对象是否包含某个属性
2020/08/29 Javascript
[45:16]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第一场 12.12
2020/12/16 DOTA
在DigitalOcean的服务器上部署flaskblog应用
2015/12/19 Python
Python新手入门最容易犯的错误总结
2017/04/24 Python
Python使用plotly绘制数据图表的方法
2017/07/18 Python
Python引用计数操作示例
2018/08/23 Python
python实现登录密码重置简易操作代码
2019/08/14 Python
python连接mongodb集群方法详解
2020/02/13 Python
pycharm快捷键汇总
2020/02/14 Python
python中Ansible模块的Playbook的具体使用
2020/05/28 Python
python如何快速拼接字符串
2020/10/28 Python
百思买美国官网:Best Buy
2016/07/28 全球购物
幼师自荐信
2013/10/26 职场文书
路政管理求职信
2014/06/18 职场文书
2014年污水处理厂工作总结
2014/12/19 职场文书
社区元宵节活动总结
2015/02/06 职场文书
致运动员赞词
2015/07/22 职场文书
MySQL 常见存储引擎的优劣
2021/06/02 MySQL