Jquery全选单选功能

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm6.aspx.cs" Inherits="wzgyd.WebForm5" %>
<!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 id="Head1" runat="server">
<title>无标题页</title>
<link href="Stylesheet1.css" rel="Stylesheet" type="text/css" />
<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
/*checked全选*/
function clickAll(){
if ($("#Check0").attr("checked")) {
$("input[name='check']").attr("checked", true);
$(".body1").css("background-color","#92c0f1");
}else {
$("input[name='check']").attr("checked", false);
$(".body1").css("background-color","#ffffff");
}
}
/*checked全选*/
function clickAll2(){
if ($("#Check4").attr("checked")) {
$(".body1").css("background-color","#92c0f1");
$("input[name='check']").attr("checked", true);
}else {
$(".body1").css("background-color","#ffffff");
$("input[name='check']").attr("checked", false);
}
}
//注册checkbox的click事件
$(document).on('click', ':checkbox', function (e) {
//停止事件冒泡,当点击的是checkbox时,就不执行父div的click
e.stopPropagation();
var oCk = $(this), parentDiv = oCk.parent().parent();
//oCk.prop('checked') ? parentDiv.css('background-color', '#fff4e8') : parentDiv.css('background-color', '');
if(oCk.prop('checked')){
parentDiv.css('background-color', '#92c0f1')
}else{
parentDiv.css('background-color', '');
$("#Check0,#Check4").attr("checked",false);
}
});
</script>
</head>
<body id="table2">
<form id="form1" runat="server">
<div style="height: auto; width:990px; color:Gray; border:0px; border:solid 0.2px #f0f0f0; font-family:微软雅黑;">
<%-- <div style=" width:200px; height: 728px; float:left;border:solid 0.2px #f0f0f0;"></div>--%>
<div style=" margin-left:20px; width:990px; height: 726px; float:left; margin-left:8px; ">
<div style="height: 28px;">
<div class="head0" style="margin-left:20px; color:Black;">选择需求计划</div>
<div style=" float:right;"><a href="#"><<</a> 1/3 <a href="#">>></a></div>
</div>
<div style=" height:14px;"></div>
<div class="body0">
<div style="float:left;"><input type="checkbox" id="Check0" name="check" onclick="clickAll()" />全选</div>
<div style="width:40px; float:left; height:43px;"></div>
<div style="width: 50px; float:left;">计划编号</div>
<div style="width:269px; float:left; height:43px;"></div>
<div style="width: 51px; float:left;">计划名称</div>
<div style="width:295px; float:left; height:43px;"></div>
<div style="width: 55px; float:left;">录入日期</div>
</div>
<div><hr /></div>
<div style="height:35px;"></div>
<div class="body1">
<div class="body2"><div class="body2" style="height:9px;"></div><input type="checkbox" id="check1" name="check" /></div>
<div class="body3"></div>
<div class="body5">11252512</div>
<div class="body6"></div>
<div class="body7">XX计划</div>
<div class="body8">
</div>
<div class="body10">2015-8-9</div>
<div class="body11">
<div class="body18"></div>
<div>物资明细</div>
</div>
</div>
<div class="body12"></div>
<div class="body13"></div>
<div class="body1">
<div class="body2"><div class="body2" style="height:9px;"></div><input type="checkbox" id="Checkbox1" name="check" /></div>
<div class="body3"></div>
<div class="body5">11252512</div>
<div class="body6"></div>
<div class="body7">XX计划</div>
<div class="body8">
</div>
<div class="body10">2015-8-9</div>
<div class="body11">
<div class="body18"></div>
<div>物资明细</div>
</div>
</div>
<div class="body12"></div>
<div class="body13"></div>
<%-- <div class="body14">
<div class="body15">
<input type="checkbox" id="Check4" name="check" onclick="clickAll2()" />全选
</div>
<div class="body16">删除选中商品</div>
<div class="body16">移到我的关注</div>
<div style="width: 76px; height:53px;float:left;"></div>
<div style="width: 197px; height:53px;float:left;">
<div style="width: 170px; float:left;">总价(不含运费):666.00元</div>
<div style="width: 169px; float:left;">已节省:100.00元</div>
</div>
<div class="body17">去结算</div>
</div>--%>
</div>
</div>
</form>
</body>
</html>
Jquery全选单选功能的更多相关文章
- jquery 书写全选反选功能
书写一个后台管理中用到的全选反选功能.代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- Jquery全选与反选checkbox(代码示例)
今天在公司要实现操作权限的功能,需要根据左边的树,选择一项,判断右边的操作权限,例如,增加,修改,删除,查看等按钮的显示与隐藏: 这个功能实现思路如下: 1.操作权限:增加.修改等按钮的ID和Text ...
- 关于JQuery全选/反选第二次失效的问题
最近在项目中,遇到一个问题,测试全选/反选功能时,第一次对母框进行选中/非选中时,能同步子框的全选/反选状态,之后再点击母框,子框就没反应了.原代码大致结构关键如下: function selectA ...
- JavaScript 实现全选 / 反选功能
JavaScript 实现全选 / 反选功能 版权声明:未经授权,内容严禁转载! 构建主体界面 编写 HTML 代码 和 CSS 代码,设计主题界面 <style> #user { wid ...
- Jquery全选系列操作(锋利的jQuery)
Jquery全选系列操作(锋利的jQuery) <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ...
- vue开发购物车,解决全选单选问题
实现全选单选,在vue中无法通过this获取input中的checkbox的checked属性,但是可以通过vue对input的特殊方式v-model来实现对应数据的绑定,同样也可以通过这种方式实现购 ...
- vue实战记录(五)- vue实现购物车功能之商品总金额计算和单选全选删除功能
vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(五) GitHub:sue ...
- 使 用 Jquery 全选+下拉+单选+事件+挂事件
先引用Jquery代码包 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...
- jQuery实现全选反选功能
废话不说,直接上代码! <html> <head> <meta http-equiv="Content-Type" content="tex ...
随机推荐
- tomcat组成及工作原理
1 - Tomcat Server的组成部分 1.1 - Server A Server element represents the entire Catalina servlet containe ...
- 阅读《LEARNING HARD C#学习笔记》知识点总结与摘要三
最近工作较忙,手上有几个项目等着我独立开发设计,所以平时工作日的时候没有太多时间,下班累了就不想动,也就周末有点时间,今天我花了一个下午的时间来继续总结与整理书中要点,在整理的过程中,发现了书中的一些 ...
- 《ASP.NET SignalR系列》第三课 SignalR的支持平台
从现在开始相关文章请到: http://lko2o.com/moon 接着第二课:<ASP.NET SignalR系列>第二课 SignalR的使用说明 一.服务器系统要求 SignalR ...
- d
1.sql题1表名:成绩表姓名 课程 分数张三 语文 81张三 数学 75李四 语文 56李四 数学 9 ...
- Mac下github项目检出与提交
项目检出 如果你的git还没有代码仓库,可以用过git的代码仓库页面新建一个你的仓库 创建git上的仓库后,我们还需要建立本地的仓库,所以打开Mac终端,建立本地仓库文件夹(这里我用HelloC),然 ...
- MVC 框架搭建
1.0 初步建立目录和项目 2.0 设置层之间的引用 IRepository引用 ModelRepository引用 Model,IRepositoryIServices引用 Model,IRepos ...
- 用c#开发微信 (4) 基于Senparc.Weixin框架的接收事件推送处理 (源码下载)
本文讲述使用Senparc.Weixin框架来快速处理各种接收事件推送.这里的消息指的是传统的微信公众平台消息交互,微信用户向公众号发送消息后,公众号回复消息给微信用户.包括以下类型: 1 subsc ...
- jQuery漂亮图标的垂直导航菜单
效果展示 http://hovertree.com/texiao/nav/3/ jQuery漂亮图标的垂直导航菜单 是一款当鼠标滑过菜单项时,会有一个背景遮罩层跟着鼠标移动,效果非常炫酷,图标还是矢量 ...
- 【C#】第3章学习要点(二)自定义类和结构
分类:C#.VS2015 创建日期:2016-06-19 使用教材:(十二五国家级规划教材)<C#程序设计及应用教程>(第3版) 一.要点概述 别人提供的类都是为了简化你的工作量用的,可是 ...
- vs2012运行项目报未能加载文件或程序集“System.Web.Mvc, Version=4.0.0.1,Culture=neutral”问题和解决方法
原先本地项目版本(4.0.0.1)高于服务器版本(4.0.0.0),本地项目改成服务器版本4.0.0.0时,发布后的项目报这个错误