jQuery之实战(checkbox,table)
程序员文章站
2022-06-10 09:49:10
...
实现功能如下：参考图片
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