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" οnclick="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" οnclick="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>
转载于:https://www.cnblogs.com/LOVEJIEYING/p/5156852.html
Jquery全选单选功能相关推荐
- vue实现全选 单选功能
实现效果 待选 全选 单选 多选 代码 1.页面结构 2.逻辑代码 3.binggo 就这么愉快的完成了
- 全选 单选和反选的实现
大家早上好,新的一天又开始咯,继续学习啊,其实最近我发现了一张图特别好玩,如下: 哈哈,就是这张,但是我想说的是,革命尚未成功啊,还得继续修炼啊,好了,闲篇扯到这里,我们今天先来看一下,风靡各大电商网 ...
- 关于JQuery全选/反选第二次失效的问题
最近在项目中,遇到一个问题,测试全选/反选功能时,第一次对母框进行选中/非选中时,能同步子框的全选/反选状态,之后再点击母框,子框就没反应了.原代码大致结构关键如下: function selectA ...
- php 全选 反选,利用vue实现全选反选功能
这次给大家带来利用vue实现全选反选功能,利用vue实现全选反选功能的注意事项有哪些,下面就是实战案例,一起来看一下. 全选功能可以说是前端开发中非常常见的一个功能,以前的项目开发用jQuery开发比 ...
- angularjscheckbox全选_AngularJS实现全选反选功能
这篇文章主要介绍了AngularJS实现全选反选功能,这里用到AngularJS四大特性之二----双向数据绑定,对angularjs实现全选反选相关知识感兴趣的朋友一起学习吧 AngularJS是为 ...
- JS 原生实现复选框全选反选功能
** JS 原生实现复选框全选反选功能 ** 按钮功能实现思路: 全选按钮: 直接将全选按钮的状态赋值给每一个 复选框. 复选框:只有当所有的复选框选中时,全选按钮才能选中,所以每当复选框每点击一次就 ...
- jQuery全选全删动态表格
jQuery全选全删动态表格 1.效果图附上: 2.代码呈上: <!DOCTaYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...
- Jquery全选系列操作（锋利的jQuery）
Jquery全选系列操作(锋利的jQuery) <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ...
- 模拟购物车页面全选单选的金额累加
1.前面部分的内容就不过多说明了,就是OkGo请求数据然后封装适配器加入数据源,先上代码 先上适配器的代码,注意这里使用的万能适配器,加入依赖 implementation 'com.github.C ...
最新文章
- 阿里云nginx配置ssl证书
- 使用php开发，基于swoole扩展开发的工具 swoole-crontab
- mysql linux 安装部署,linux之MySQL安装部署(示例代码)
- java中不用impore导入的_java import机制(不用IDE)
- nikita popov php,PHP中对performance的考虑点
- 10.11.5 brew mysql_mac os10.11下安装MySQLdb
- 【codevs1557】 热浪， Dijkstra算法入门
- java 注解 对象_Java基础-学习使用Annotation注解对象
- 算法导论（ FFT 自动机 最优二叉搜索树 ！！！）
- kali Linux Web 渗透测试视频教程— 第六课 网络扫描-nmap与zmap
- 计算机辅助几何设计等值曲线,中国科学技术大学硕士专业：计算机辅助几何设计...
- AHK实现DD驱动按键连发
- 2020年全球电动汽车展望
- 极点五笔特殊符号输入方法
- 苹果iPad守江山，安卓平板搅江湖】
- 任正非、董明珠、曹德旺，中国实业三大网红！他们有个共同点：坚决不做一件事！
- MIX2 适配看这一篇就够了，18:9 只需一行代码
- FL Studio 21中文版支持主题随心换，FL Studio 21Mac版新增对苹果M2/1家族芯片原生支持。
- [转]详细说明等额本金和等额本息的计算方式与利弊
- android自定义插值器_自定义缓动插值器，可在Android中实现有意义的动作