javascript中checkbox使用方法实例演示
2015-11-19 10:45
836 查看
本文实例讲述了JavaScript实现的伸展收缩型菜单代码。分享给大家供大家参考。具体如下:
运行效果截图如下:
(1)全选
(2)部分选
(3)反选(全不选)
具体代码如下:
<!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程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- JavaScript 各种遍历方式详解
- call/apply/bind 的理解与实例分享
- 如何创建对象以及jQuery中创建对象的方式
- IE8开发人员工具教程(二)
- 在flex中执行一个javascript方法的简单方式