<%@ 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全选单选功能的更多相关文章

  1. jquery 书写全选反选功能

    书写一个后台管理中用到的全选反选功能.代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  2. Jquery全选与反选checkbox（代码示例）

    今天在公司要实现操作权限的功能,需要根据左边的树,选择一项,判断右边的操作权限,例如,增加,修改,删除,查看等按钮的显示与隐藏: 这个功能实现思路如下: 1.操作权限:增加.修改等按钮的ID和Text ...

  3. 关于JQuery全选/反选第二次失效的问题

    最近在项目中,遇到一个问题,测试全选/反选功能时,第一次对母框进行选中/非选中时,能同步子框的全选/反选状态,之后再点击母框,子框就没反应了.原代码大致结构关键如下: function selectA ...

  4. JavaScript 实现全选 / 反选功能

    JavaScript 实现全选 / 反选功能 版权声明:未经授权,内容严禁转载! 构建主体界面 编写 HTML 代码 和 CSS 代码,设计主题界面 <style> #user { wid ...

  5. Jquery全选系列操作（锋利的jQuery）

    Jquery全选系列操作(锋利的jQuery) <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ...

  6. vue开发购物车，解决全选单选问题

    实现全选单选,在vue中无法通过this获取input中的checkbox的checked属性,但是可以通过vue对input的特殊方式v-model来实现对应数据的绑定,同样也可以通过这种方式实现购 ...

  7. vue实战记录（五）- vue实现购物车功能之商品总金额计算和单选全选删除功能

    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(五) GitHub:sue ...

  8. 使 用 Jquery 全选+下拉+单选+事件+挂事件

    先引用Jquery代码包 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...

  9. jQuery实现全选反选功能

    废话不说,直接上代码! <html> <head> <meta http-equiv="Content-Type" content="tex ...

随机推荐

  1. Pentaho Kettle 6.1连接CDH5.4.0集群

    作者:Syn良子 出处:http://www.cnblogs.com/cssdongl 欢迎转载 最近把之前写的Hadoop MapReduce程序又总结了下,发现很多逻辑基本都是大致相同的,于是想到 ...

  2. Elasticsearch增删改查 之 —— Get查询

    GET API是Elasticsearch中常用的操作,一般用于验证文档是否存在:或者执行CURD中的文档查询.与检索不同的是,GET查询是实时查询,可以实时查询到索引结果.而检索则是需要经过处理,一 ...

  3. 分享我基于NPOI+ExcelReport实现的导入与导出EXCEL类库：ExcelUtility

    1. ExcelUtility功能:  1.将数据导出到EXCEL(支持XLS,XLSX,支持多种类型模板,支持列宽自适应)  类名:ExcelUtility. Export  2.将EXCEL ...

  4. CompressHelper

    public static string CompressString(string unCompressedString) { byte[] bytData = System.Text.Encodi ...

  5. C# 解析html —— 将html转为XHTML，然后利用Xml解析

    呵呵,由于正则不熟,所以另谋出路——利用XML去解析html. 要想将抓取到的数据(直接抓取到的是byte[])  转为XML文档(即XMLDocument对象),有两个要点: 一.判断编码(http ...

  6. MVC 4.0 学习中遇到的bug

     1.0 _ViewStart.cshtml  _ViewStart.cshtml 里面的如果写了 <script src="/Scripts/jquery-1.8.2.js" ...

  7. 基于MVC4+EasyUI的Web开发框架经验总结（14）--自动生成图标样式文件和图标的选择操作

    在很多Web系统中,一般都可能提供一些图标的选择,方便配置按钮,菜单等界面元素的图标,从而是Web系统界面看起来更加美观和协调.但是在系统中一般内置的图标样式相对比较有限,而且硬编码写到样式表里面,这 ...

  8. Java---Java的面试题（二）

    1 Switch能否用string做参数?在 Java 7 之前, switch 只能支持byte,short,char,int 或者其对应的封装类以及 Enum 类型.在JAVA 7中,String ...

  9. Java并发编程：如何创建线程？

    Java并发编程:如何创建线程? 在前面一篇文章中已经讲述了在进程和线程的由来,今天就来讲一下在Java中如何创建线程,让线程去执行一个子任务.下面先讲述一下Java中的应用程序和进程相关的概念知识, ...

  10. 【C语言学习趣事】_32_平胸的尴尬，嫁不出去的姑娘

    为什么写这篇文章呢? 为什么要弄这么个题目呢? 首先解释为什么用这个题目.这一切都要从那天在QQ群中的讨论说起,那天在群中,一个哥们问了一个关于(void)0 的问题.然后大家说到了 (void)0和 ...