- 浏览: 2288108 次
- 性别:
- 来自: 成都
文章分类
- 全部博客 (357)
- J2EE (49)
- JavaScript (40)
- Spring (19)
- Struts (5)
- CSS (8)
- Hibernate (16)
- Java (67)
- DWR (4)
- JSON (3)
- XFIRE (1)
- Tomcat (1)
- Ant (2)
- 设计模式 (2)
- 经典收藏 (2)
- JSP (10)
- Linux (0)
- WebLogic (11)
- myeclipse (13)
- Buffalo (4)
- 文件上传相关 (1)
- oracle (33)
- html (6)
- JSTL (3)
- SVN (2)
- GIT (1)
- 孙卫琴(Java网络编程精解) (1)
- DOM4J (2)
- Swing (1)
- AJAX (1)
- Eclipse (5)
- 日志组件 (3)
- PowerDesigner (1)
- Jquery (22)
- IT技术开发相关网址 (1)
- Nutz (1)
- 其它 (1)
- Velocity (3)
- WebService (1)
- MySql (2)
- Android (1)
- Maven (2)
- Quartz (11)
- Lucene (1)
- springsource (1)
- Junit (1)
- Activiti (0)
最新评论
-
yzlseu:
拼凑,没有营养
Activiti进阶—分配组任务 -
zhangsenhao:
非常赞!代码很清楚
SpringMVC3.0+MyIbatis3.0(分页示例) -
xiamw2000:
分页写得不对,应该是 : order by ${orderNa ...
SpringMVC3.0+MyIbatis3.0(分页示例) -
sheertewtw:
...
SpringMVC:上传与下载 -
kingtoon:
...
XSS之xssprotect
实现功能如下:参考图片
1 页面加载时效果
2 全选效果
3 取消全选效果
4 反选效果
5 全选奇行效果
6 全选偶行效果
7 点击复选框效果
具体代码如下:
CSS代码如下:
jQuery代码如下:
HTML代码如下:
整个页面代码如下:
1 页面加载时效果
2 全选效果
3 取消全选效果
4 反选效果
5 全选奇行效果
6 全选偶行效果
7 点击复选框效果
具体代码如下:
CSS代码如下:
<style type="text/css"> body { font-family: Arial, Helvetica, sans-serif; } .listhead { FONT: 15pt "宋体"; COLOR: #010778; BACKGROUND-COLOR: #E7EEF7; BORDER-LEFT: #FFFFFF 1px solid; BORDER-TOP: #FFFFFF 1px solid; BORDER-RIGHT: #D9DFE7 1px solid; BORDER-BOTTOM: #D9DFE7 1px solid; } </style>
jQuery代码如下:
<script type="text/javascript" > $(function(){ $('#checkAll').click(function(){ /* if(this.checked == true){ $(":checkbox[name=checkUser]").attr("checked",true); }else{ $(":checkbox[name=checkUser]").attr("checked",false); }*/ $("input:checkbox[name=checkUser]").attr("checked",this.checked); if(this.checked){ $("#tbody>tr").each(function(index){ this.style.backgroundColor = "#cfeace"; }); }else{ $("#tbody>tr").each(function(index){ this.style.backgroundColor = (index % 2 != 1 ? "#F3F3F3" :"#DEE9F7"); }); } }); $("#selectAll_1").click(function(){ $("input:checkbox[name=checkUser,checkAll]").attr("checked",true); $("#tbody>tr").each(function(index){ this.style.backgroundColor = "#cfeace"; }); }); $("#selectAll_2").click(function(){ //$("input:checkbox[name=checkUser,checkAll]").attr("checked",false); $("input:checkbox[name=checkUser,checkAll]").removeAttr("checked");//取消全选 $("#tbody>tr").each(function(index){ this.style.backgroundColor = (index % 2 != 1 ? "#F3F3F3" :"#DEE9F7"); }); }); $("#selectAll_3").click(function(){ //可用长度来判断是否选定:选中为1,没选为0 //alert($("#checkAll:checked").length); if ($("#checkAll").is(":checked")) { //alert("选中了。。"); $("#checkAll").removeAttr("checked"); }else{ // alert("没选中。。"); $("#checkAll").attr("checked",true); } /* $("input:checkbox[name=checkUser]").each(function(index){ //在jQuery内部用this可提高速度 if(this.checked){ this.checked = false; }else{ this.checked = true; } });*/ $("#tbody>tr").each(function(index){ if($(this).find("td:eq(0)>input:checkbox").is(":checked") == true){ $(this).find("td:eq(0)>input:checkbox").attr("checked",false); this.style.backgroundColor = (index % 2 != 1 ? "#F3F3F3" :"#DEE9F7"); }else{ $(this).find("td:eq(0)>input:checkbox").attr("checked",true); this.style.backgroundColor = "#cfeace"; } }); }); $("#selectAll_4").click(function(){ $("input:checkbox[name=checkUser]:even").attr("checked",true); $("#tbody>tr").each(function(index){ if($(this).find("td:eq(0)>input:checkbox").is(":checked") == true){ this.style.backgroundColor = "#cfeace"; } }); }); $("#selectAll_5").click(function(){ $("input:checkbox[name=checkUser]:odd").attr("checked",true); $("#tbody>tr").each(function(index){ if($(this).find("td:eq(0)>input:checkbox").is(":checked") == true){ this.style.backgroundColor = "#cfeace"; } }); }); //$("#tbody>tr:even").css("background-color",'#F3F3F3'); //$("#tbody>tr:odd").css("background-color",'#DEE9F7'); $("#tbody>tr").each(function(index){ this.style.backgroundColor = (index % 2 != 1 ? "#F3F3F3" :"#DEE9F7"); /* $(this).mouseover(function() { this.style.backgroundColor = "#EEF8FF"; }); $(this).mouseout(function() { this.style.backgroundColor = (index % 2 != 1 ? "#F3F3F3" :"#DEE9F7"); });*/ $(this).bind({ mouseover:function(){ this.style.backgroundColor = "#EEF8FF"; if($(this).find("td:eq(0)>input:checkbox").is(":checked") == true){ this.style.backgroundColor = "#cfeace"; } },mouseout:function(){ this.style.backgroundColor = (index % 2 != 1 ? "#F3F3F3" :"#DEE9F7"); if($(this).find("td:eq(0)>input:checkbox").is(":checked") == true){ this.style.backgroundColor = "#cfeace"; } },click:function(){ //判断tr的第一个td内的input checkbox是什么状态 if($(this).find("td:eq(0)>input:checkbox").is(":checked") == true){ this.style.backgroundColor = "#cfeace"; }else{ this.style.backgroundColor = (index % 2 != 1 ? "#F3F3F3" :"#DEE9F7"); } } }); }); }); </script>
HTML代码如下:
<div style="padding-left:30%;padding-top:5%"> <h1>checkbox示例</h1> <table style="width:500px;height:100%;align:center;border: 1px black solid;background: white;" bgcolor=#7E92A8 border=0 cellpadding=1 cellspacing=1 rules="all"> <thead> <tr class="listhead"> <th><input type="checkbox" id="checkAll" name="checkAll"/></th> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody align="center" id="tbody"> <tr id="tr_1"> <td><input type="checkbox" name="checkUser" value="1"/></td> <td>张三</td> <td>25</td> <td>男</td> </tr> <tr id="tr_2"> <td><input type="checkbox" name="checkUser" value="2"/></td> <td>李四</td> <td>20</td> <td>男</td> </tr> <tr id="tr_3"> <td><input type="checkbox" name="checkUser" value="3"/></td> <td>王五</td> <td>30</td> <td>女</td> </tr> <tr id="tr_4"> <td><input type="checkbox" name="checkUser" value="4"/></td> <td>李逵</td> <td>36</td> <td>男</td> </tr> <tr id="tr_5"> <td><input type="checkbox" name="checkUser" value="5"/></td> <td>王熙凤</td> <td>31</td> <td>女</td> </tr> <tr id="tr_6"> <td><input type="checkbox" name="checkUser" value="6"/></td> <td>刘少国</td> <td>30</td> <td>男</td> </tr> <tr id="tr_7"> <td><input type="checkbox" name="checkUser" value="7"/></td> <td>李四光</td> <td>30</td> <td>男</td> </tr> <tr id="tr_8"> <td><input type="checkbox" name="checkUser" value="8"/></td> <td>何故</td> <td>30</td> <td>男</td> </tr> <tr id="tr_9"> <td><input type="checkbox" name="checkUser" value="9"/></td> <td>王冠</td> <td>30</td> <td>女</td> </tr> <tr id="tr_10"> <td><input type="checkbox" name="checkUser" value="10"/></td> <td>王平</td> <td>18</td> <td>男</td> </tr> </tbody> <tfoot> <tr> <td colspan="4"> <input type="button" value="全选" id="selectAll_1"/> <input type="button" value="取消全选" id="selectAll_2"/> <input type="button" value="反选" id="selectAll_3"/> <input type="button" value="全选奇行" id="selectAll_4"/> <input type="button" value="全选偶行" id="selectAll_5"/> </td> </tr> </tfoot> </table> <p><a href="index.jsp">返回</a></p> </div>
整个页面代码如下:
<%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery获取元素写法</title> <script src="../scripts/jquery-1.6.2.min.js" type="text/javascript"></script> <style type="text/css"> body { font-family: Arial, Helvetica, sans-serif; } .listhead { FONT: 15pt "宋体"; COLOR: #010778; BACKGROUND-COLOR: #E7EEF7; BORDER-LEFT: #FFFFFF 1px solid; BORDER-TOP: #FFFFFF 1px solid; BORDER-RIGHT: #D9DFE7 1px solid; BORDER-BOTTOM: #D9DFE7 1px solid; } </style> <script type="text/javascript" > $(function(){ $('#checkAll').click(function(){ /* if(this.checked == true){ $(":checkbox[name=checkUser]").attr("checked",true); }else{ $(":checkbox[name=checkUser]").attr("checked",false); }*/ $("input:checkbox[name=checkUser]").attr("checked",this.checked); if(this.checked){ $("#tbody>tr").each(function(index){ this.style.backgroundColor = "#cfeace"; }); }else{ $("#tbody>tr").each(function(index){ this.style.backgroundColor = (index % 2 != 1 ? "#F3F3F3" :"#DEE9F7"); }); } }); $("#selectAll_1").click(function(){ $("input:checkbox[name=checkUser,checkAll]").attr("checked",true); $("#tbody>tr").each(function(index){ this.style.backgroundColor = "#cfeace"; }); }); $("#selectAll_2").click(function(){ //$("input:checkbox[name=checkUser,checkAll]").attr("checked",false); $("input:checkbox[name=checkUser,checkAll]").removeAttr("checked");//取消全选 $("#tbody>tr").each(function(index){ this.style.backgroundColor = (index % 2 != 1 ? "#F3F3F3" :"#DEE9F7"); }); }); $("#selectAll_3").click(function(){ //可用长度来判断是否选定:选中为1,没选为0 //alert($("#checkAll:checked").length); if ($("#checkAll").is(":checked")) { //alert("选中了。。"); $("#checkAll").removeAttr("checked"); }else{ // alert("没选中。。"); $("#checkAll").attr("checked",true); } /* $("input:checkbox[name=checkUser]").each(function(index){ //在jQuery内部用this可提高速度 if(this.checked){ this.checked = false; }else{ this.checked = true; } });*/ $("#tbody>tr").each(function(index){ if($(this).find("td:eq(0)>input:checkbox").is(":checked") == true){ $(this).find("td:eq(0)>input:checkbox").attr("checked",false); this.style.backgroundColor = (index % 2 != 1 ? "#F3F3F3" :"#DEE9F7"); }else{ $(this).find("td:eq(0)>input:checkbox").attr("checked",true); this.style.backgroundColor = "#cfeace"; } }); }); $("#selectAll_4").click(function(){ $("input:checkbox[name=checkUser]:even").attr("checked",true); $("#tbody>tr").each(function(index){ if($(this).find("td:eq(0)>input:checkbox").is(":checked") == true){ this.style.backgroundColor = "#cfeace"; } }); }); $("#selectAll_5").click(function(){ $("input:checkbox[name=checkUser]:odd").attr("checked",true); $("#tbody>tr").each(function(index){ if($(this).find("td:eq(0)>input:checkbox").is(":checked") == true){ this.style.backgroundColor = "#cfeace"; } }); }); //$("#tbody>tr:even").css("background-color",'#F3F3F3'); //$("#tbody>tr:odd").css("background-color",'#DEE9F7'); $("#tbody>tr").each(function(index){ this.style.backgroundColor = (index % 2 != 1 ? "#F3F3F3" :"#DEE9F7"); /* $(this).mouseover(function() { this.style.backgroundColor = "#EEF8FF"; }); $(this).mouseout(function() { this.style.backgroundColor = (index % 2 != 1 ? "#F3F3F3" :"#DEE9F7"); });*/ $(this).bind({ mouseover:function(){ this.style.backgroundColor = "#EEF8FF"; if($(this).find("td:eq(0)>input:checkbox").is(":checked") == true){ this.style.backgroundColor = "#cfeace"; } },mouseout:function(){ this.style.backgroundColor = (index % 2 != 1 ? "#F3F3F3" :"#DEE9F7"); if($(this).find("td:eq(0)>input:checkbox").is(":checked") == true){ this.style.backgroundColor = "#cfeace"; } },click:function(){ //判断tr的第一个td内的input checkbox是什么状态 if($(this).find("td:eq(0)>input:checkbox").is(":checked") == true){ this.style.backgroundColor = "#cfeace"; }else{ this.style.backgroundColor = (index % 2 != 1 ? "#F3F3F3" :"#DEE9F7"); } } }); }); }); </script> </head> <body> <div style="padding-left:30%;padding-top:5%"> <h1>checkbox示例</h1> <table style="width:500px;height:100%;align:center;border: 1px black solid;background: white;" bgcolor=#7E92A8 border=0 cellpadding=1 cellspacing=1 rules="all"> <thead> <tr class="listhead"> <th><input type="checkbox" id="checkAll" name="checkAll"/></th> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody align="center" id="tbody"> <tr id="tr_1"> <td><input type="checkbox" name="checkUser" value="1"/></td> <td>张三</td> <td>25</td> <td>男</td> </tr> <tr id="tr_2"> <td><input type="checkbox" name="checkUser" value="2"/></td> <td>李四</td> <td>20</td> <td>男</td> </tr> <tr id="tr_3"> <td><input type="checkbox" name="checkUser" value="3"/></td> <td>王五</td> <td>30</td> <td>女</td> </tr> <tr id="tr_4"> <td><input type="checkbox" name="checkUser" value="4"/></td> <td>李逵</td> <td>36</td> <td>男</td> </tr> <tr id="tr_5"> <td><input type="checkbox" name="checkUser" value="5"/></td> <td>王熙凤</td> <td>31</td> <td>女</td> </tr> <tr id="tr_6"> <td><input type="checkbox" name="checkUser" value="6"/></td> <td>刘少国</td> <td>30</td> <td>男</td> </tr> <tr id="tr_7"> <td><input type="checkbox" name="checkUser" value="7"/></td> <td>李四光</td> <td>30</td> <td>男</td> </tr> <tr id="tr_8"> <td><input type="checkbox" name="checkUser" value="8"/></td> <td>何故</td> <td>30</td> <td>男</td> </tr> <tr id="tr_9"> <td><input type="checkbox" name="checkUser" value="9"/></td> <td>王冠</td> <td>30</td> <td>女</td> </tr> <tr id="tr_10"> <td><input type="checkbox" name="checkUser" value="10"/></td> <td>王平</td> <td>18</td> <td>男</td> </tr> </tbody> <tfoot> <tr> <td colspan="4"> <input type="button" value="全选" id="selectAll_1"/> <input type="button" value="取消全选" id="selectAll_2"/> <input type="button" value="反选" id="selectAll_3"/> <input type="button" value="全选奇行" id="selectAll_4"/> <input type="button" value="全选偶行" id="selectAll_5"/> </td> </tr> </tfoot> </table> <p><a href="index.jsp">返回</a></p> </div> </body> </html>
- jquery-setcheckbox.zip (2.2 KB)
- 下载次数: 40
发表评论
-
java json-lib & jQuery & jsonp
2016-06-30 11:31 824参考链接: 1、http://hanqunfeng.iteye ... -
JavaScript异步编程学习
2016-06-19 14:59 791一 JavaScript学习资源 1、Reg Braithwa ... -
jQuery图表(jqPlot,Highcharts)
2012-05-18 00:48 23556jQuery图表在http://www.oschina.net ... -
JavaScript中的arguments,callee,caller,call,appy [备忘]
2012-05-08 23:13 1621转载:JavaScript中的argume ... -
IE,FF获取文件绝对路径方法
2012-03-25 23:30 4986参考资料 1 解决Firefox3,IE7,IE8上传图片预览 ... -
jQuery之Ztree
2011-10-19 17:14 17581参考资料 1 spring+struts2+hibernate ... -
jQuery之弹出层(用于提示)
2011-10-19 10:26 2294参考了权威指南的部分代码 实现效果:单击按钮显示层,在单击就 ... -
jQuery之get(txt,xml,json二点注意事项)
2011-10-18 14:42 5709参考资料 1 jQuery ajax - get() 方法 h ... -
jQuery之load
2011-10-17 15:33 7778参考资料 1 jQuery ajax - load() 方法 ... -
My97DatePicker常用练习
2011-09-15 17:03 5149参考官网资料:http://www.m ... -
jQuery之ID选择器
2011-08-23 15:25 9900参考资料 强烈推荐:张子秋 从零开始学习jQuery (二) ... -
jQuery之effect(效果)
2011-08-23 14:59 2607参考资料 从零开始学习jQuery (7) jQuery动画- ... -
jQuery之css
2011-08-23 13:54 1629jQuery W3C文档 http://www.w3schoo ... -
jQuery之select
2011-08-22 16:39 2355话不多说,详见代码吧 网页代码 <div style ... -
jQuery之table(隔行变色)
2011-08-19 15:52 2776页面代码如下: <table style=&quo ... -
jQuery之checkbox(复选框)
2011-08-18 17:06 2104业务需求:经常在用户登记中有这样的东西,只选择其中一项或者多项 ... -
jQuery之radio(单选)
2011-08-18 15:41 2460页面代码如下: <inpu ... -
jQuery之get(val,text,html)
2011-08-18 14:53 6052参考资料 1 jquery中,html、val与text三者属 ... -
jQuery之ID选择器
2011-08-18 13:58 16参考资料 强烈推荐:张子秋 从零开始学习jQuery (二) ... -
jQuery之jqzoom(图片放大镜插件)
2011-08-18 11:07 19733参考资料 1 基于jQuery开发的图片放大镜插件 - 淘宝网 ...
相关推荐
本文将详细讲解如何使用jQuery来操作checkbox,并实现全选、全不选、反选以及获取选中值这四个核心功能。 ### 一、jQuery选择器与checkbox操作 在jQuery中,我们可以使用不同的选择器来选取页面上的checkbox元素。...
在网页开发中,表格(Table)是展示数据的常用组件,而jQuery库为开发者提供了丰富的API,使得操作表格中的元素,如复选框(Checkbox),变得更加便捷。本篇将详细探讨如何利用jQuery实现表格中checkbox的相关事件...
昨天网上找了很多关于设置select checkbox radio只读的,都没办法满足要求,自己写了一个
本文将深入探讨如何使用jQuery来实现复选框(checkbox)的选中和取消选中功能,以及如何处理多选的情况。 首先,我们需要理解HTML中的`<input>`元素类型为"checkbox"的基本用法。复选框用于让用户从多个选项中选择...
对于“jQuery的checkbox样式”,这是一个关注于提升网页中复选框(checkbox)视觉效果的主题。在这个场景中,我们讨论的是一个基于jQuery的插件,它专门用于美化标准HTML复选框的样式。 该插件的名称可能为“jQuery...
### jQuery实现全选CheckBox功能详解 #### 背景与需求 在Web开发中,特别是在表单处理方面,经常会遇到需要实现多个复选框(CheckBox)的“全选”、“反选”等功能的需求。这样的功能不仅可以提升用户体验,还能...
在本教程中,我们将深入探讨如何使用jQuery来操作checkbox元素,特别是动态生成、设置显示数量以及获取选中项等核心知识点。 首先,让我们了解checkbox的基本概念。Checkbox是HTML中的一个表单元素,用于让用户对一...
1. **jQuery选择器和DOM操作**:在创建这个下拉框时,jQuery的选择器会用于选取特定的DOM元素,例如`<div>`和`<input type="checkbox">`。同时,jQuery提供了丰富的DOM操作方法,如`.append()`用于添加元素,`....
本文将深入探讨如何在jQuery环境下实现输入框(input)复选框(checkbox)的联动效果,即当某个复选框被选中时,能够自动触发关联的上级或下级复选框的状态改变。 ### 1. jQuery 基础 首先,确保你的项目已经引入...
jQuery的高性能TreeView源码(带CheckBox) 1:支持静态的树,即一次性将全部数据加载到客户端。 2:异步树,即一次只加载一级或若干级节点,子节点可以异步加载数据。 3:Checkbox树(可能是静态树也可能是异步树...
本篇文章将深入探讨如何使用jQuery来操作checkbox和radio元素,这两种元素在表单提交和用户交互中扮演着重要角色。 首先,让我们了解checkbox和radio的基本概念。Checkbox用于提供多选选项,用户可以勾选多个选项;...
JQuery 判断checkbox是否选中,checkbox全选,获取checkbox选中值
**绚丽的复选框 jQuery-Checkbox** 在网页设计中,复选框(checkbox)是常见的交互元素,用于让用户选择一个或多个选项。然而,原始的HTML复选框样式通常较为简单,缺乏吸引力。为了提升用户体验和界面美观度,...
本文将详细探讨如何使用jQuery对checkbox进行操作,这些操作包括选择、取消选择、检查状态以及实现更复杂的交互效果。 一、jQuery选择checkbox 在jQuery中,我们可以使用不同的选择器来选取checkbox元素。例如,`$...
jquery 树形 checkbox jQuery(document).ready(function(){ jQuery(".mytree").checkboxTree({ collapsedarrow: "images/checkboxtree/img-arrow-collapsed.gif", expandedarrow: "images/checkboxtree/img-...
"Jquery全选反选Checkbox"是一个常见的功能需求,特别是在需要用户批量选择或取消选择多个选项的场景下。这个功能通常应用于表格、列表或其他数据展示组件,让用户能够快速地对一组复选框进行全选或反选操作。 首先...
$('table tr').find('input[type=checkbox]').each(function(index) { if (index % 2 === 0) { $(this).prop('checked', true); } else { $(this).prop('checked', false); } }); }); ``` 以上就是使用...
本文实例讲述了jQuery实现table表格checkbox全选的方法。分享给大家供大家参考,具体如下: 今天在页面中使用jQuery实现了全选框操作,如图: 具体的实现过程很简单: 第一步 设计一个简单的表格: 设置表格列标题...
jQuery 对checkbox的操作