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>

时间: 2024-10-10 15:20:59

Jquery全选单选功能的相关文章

jquery全选小功能

背景需求:全选,取消全选,以及全部选中后自动勾选全选,全选后取消一个时同时自动取消全选(不知道怎么描述这个功能,就这么解释吧...) html代码如下: <input type="checkbox" id="checkAll" name="checkAll"/>全选 <input type="checkbox" name="check" value="1"/>1

JQuery实现列表中复选框全选反选功能封装

JQuery实现列表中复选框全选反选功能封装 我们在做列表的时候经常会遇到全选,反选进行批量处理问题,例如: 我当时就是简单的实现了,然后想封装到公共的js中,封装的太烂,不好意思贴出来了(就是把实现代码之间放到公共js中,然后每个页面都用固定的id,class,现在想想我都不好意思叫他封装了),然后想到之前老大有写过这个功能去看下他怎么写的,真是没有对比就没有伤害啊,这才叫封装: 1 $(':checkbox[data-check-target]').click(function () { 2

jquery 书写全选反选功能

书写一个后台管理中用到的全选反选功能.代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>全选反选插件</title> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/

jQuery全选反选插件的写法

jQuery全选反选插件,经易让你实现一个表单列表数据的全选与取消全选功能,内含示例,小巧实用.自动判断当前选中数量,加上全选.在没有jQuery之前,我们需要一大段js代码来实现这种效果.有了jQuery这个强大的库之后,我们可以很方便的开发实现这种效果的jQuery插件.我将它命名为jQuery.fn.check插件.前端框架分享 在构建我们的插件之前,我们想考虑一下其功能需求: 所有复选框的状态都随全选复选框的状态而发生变化:如果所有复选框都被选中时,全选复选框立即处于选中状态:如果当前选

jquery 全选 反选 取消 批量删除

首选引入jquery 全选 //全选 function myall(){ $("input[name='d[]']").each(function(index,e){ $(this).prop('checked',true); }); } 取消 //当true改为false时为取消 // function no(){ // $("input[name='d[]']").each(function(index,e){ // $(this).prop('checked'

jquery全选,jquery全不选,jquery反选

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <title>全选,不全选,反选</title> <script src="js/jquery.js" type="text/j

jQuery 全选与反选时出现的bug!

今天在写项目,使用jQuery1.10.2 发现一个小小的bug, 在设置checked属性时,前两次反选的时候是正常的,后面均不正确,通过调试, 准确的说应该是只有第一次是正确的,在第二次单击时,事件快完成的时候的运行的流程有点奇怪.所以自己感觉这么 成熟的框架不应该出现这个问题,于是又将1.11.1版本下载下来,也是jQuery1的最新版本测试,同样末果,问题依 然存在,使用标准的document.getElementById, 直接设置值是没有问题的. 我本人根据测试,应该是jQuery的

分页的前后交互配置+全选隐藏功能,该条信息的前后交互(全选与该条信息的绑定)。

其中两个知识点需要注意: 1.分页的前后交互配置. 2.全选隐藏功能,该条信息的前后交互(全选与该条信息的绑定). a)分页的交互: $(function(){         var pageNum=1;//总页数         var pageIndex=1;//页索引,当前页         var num=10;         getData(1,num);         function getData(pageIndex,num){             $.ajax({  

jquery全选、反选、全不选

jquery全选.反选.全不选简单实现 Jquery代码 !function ($) { //全选 反选 全不选 $("#selAll").click(function () { $(".lists :checkbox").not(':disabled').prop("checked", true); }); $("#unSelAll").click(function () { $(".lists :checkbox