jQuery之实战(checkbox,table)

创建时间：2016-10-16 投稿人：浏览次数：879

实现功能如下：参考图片
1 页面加载时效果

2 全选效果

3 取消全选效果

4 反选效果

5 全选奇行效果

6 全选偶行效果

7 点击复选框效果

具体代码如下：
CSS代码如下：
Java代码

<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代码如下：
Java代码

<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代码如下：
Java代码

<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>

声明：该文观点仅代表作者本人，入门客AI创业平台信息发布平台仅提供信息存储空间服务，如有疑问请联系rumenke@qq.com。