jQuery实现全选与全部选
为了便于用户理解，直接粘贴下面的代码即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="../css/font-awname.css">
<style>
*{
margin: ;
padding:;
list-style: none;
}
.boxs{
margin: 20px 10px 20px;
}
/*导出文件*/
#downLoad{
width:90px;
height: 30px;
background-color: #3aa1ff;
color: #fff;
text-align: center;
line-height: 30px;
cursor: pointer;
}
/*方法二方式*/
.waysTwo{
margin-top: 20px;
}
.waysTwo li{
width: 20px;
height: 20px;
border: 1px solid #ccc;
margin-top: 5px;
color: #fff;
}
.waysTwo li:hover{
border-color:#3aa1ff;
}
.boxBg{
border: 1px solid #3aa1ff;
background: #3aa1ff;
color: #fff;
}
</style>
</head>
<body>
<div class="boxs">
<div id="downLoad"><i class="fa fa-upload" aria-hidden="true"></i>批量导出</div>
<h3>全选与全不选方法二:</h3>
<div class='waysOne'>
<!-- 全选与全不选方法一 -->
<ul id="main-demo">
<li ><input type="checkbox" id="sellectAll" name="sellectAll" title="写作" lay-skin="primary" >标题</li>
</ul>
<ul class="main-demo">
<li ><input class="selectBox" type="checkbox" name="selectBox" title="写作" lay-skin="primary"></li>
<li ><input class="selectBox" type="checkbox" name="selectBox" title="写作" lay-skin="primary" ></li>
</ul>
</div>
<hr>
<h3>全选与全不选方法二:</h3>
<!-- 全选与全不选方法二 -->
<div class="waysTwo">
<ul>
<li class="palyer-tit-check">
<i class="fa fa-check"></i>
</li>
</ul>
<ul>
<li class="palyer-table-check">
<i class="fa fa-check"></i>
</li>
<li class="palyer-table-check">
<i class="fa fa-check"></i>
</li>
<li class="palyer-table-check">
<i class="fa fa-check"></i>
</li>
</ul>
</div>
</div>
</body>
<script src="../js/jquery.js"></script>
<script>
/*input绑定属性时注意事项：
给input绑定checked属性时不能用attr()方法，绑定不成功；
prop()可以绑定checked事件，打印的checked值为boolean值，绑定成功为true,反之，为false
*/
//头部-全选
$(document).on('click', '#sellectAll', function() {
var checkedOfAll=$("#sellectAll").prop("checked");
// alert(checkedOfAll);
$("input[name='selectBox']").prop("checked", checkedOfAll);
});
//列表-单选
$(document).on('click', '.selectBox', function() {
var ths = $(this);
if (ths.checked == false) {
$("input[name=sellectAll]:checkbox").prop('checked', false);
}
else {
var count = $("input[name='selectBox']:checkbox:checked").length;
if (count == $("input[name='selectBox']:checkbox").length) {
$("input[name=sellectAll]:checkbox").prop("checked", true);
}else{
$("input[name=sellectAll]:checkbox").prop("checked", false);
}
}
}); // 方法二
//顶部-全选按钮
var titCheck = $('.palyer-tit-check');
var tableCheck = $('.palyer-table-check');
titCheck.on('click', function(){
if($(this).hasClass('boxBg')){
$(this).removeClass('boxBg');
tableCheck.removeClass('boxBg');
return false;
}
$(this).addClass('boxBg');
tableCheck.addClass('boxBg');
}); //列表-单选按钮
console.log(tableCheck.length);
tableCheck.on('click', function(){
if($(this).hasClass('boxBg')){
$(this).removeClass('boxBg');
return false;
}
$(this).addClass('boxBg');
}); /*批量导出*/
$(document).on('click', '#downLoad', function() {
if (titCheck.hasClass('boxBg') || tableCheck.hasClass('boxBg')){
//下载执行的事件
}
});
</script>
</html>
jQuery实现全选与全部选的更多相关文章
- 11月8日下午Jquery取属性值（复选框、下拉列表、单选按钮）、做全选按钮、JSON存储、去空格
1.jquery取复选框的值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
- jQuery实现全选效果【转】
这是一段用jquery实现全选的代码,主要思路如下: 1.所有的复选框都有单击事件,所有效果都是在单击事件下实现的 2.全选复选框所实现的功能与其他复选选项实现的功能不同,所有在单击事件内做一个判断, ...
- jquery的全选插件
全选看起来挺简单的,要做得完美就不那么容易了. 目前,我的全选插件能做到以下6点: 1.点击全选checkbox,能将要选择的checkbox都选中.去掉全选按钮,能将所有的checkbox都不选.这 ...
- jQuery实现全选、全不选、反选
如图,需要使用jQuery实现全选.全不选.反选功能: 核心代码: 全选 $("#check_all").click(function(){ $("input:check ...
- python: jquery实现全选 反选 取消
引入这个jquery-1.12.4.js jquery实现全选 反选 取消 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitio ...
- jquery实现全选、反选、不选
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8&quo ...
- jquery的全选/全不选/反选以及attr添加checked属性失败的解决办法
如下图: <head> <title></title> <style type="text/css"> div { border: ...
- jquery checkbox全选，全不选，反选方法，jquery checkbox全选只能操作一次
jquery checkbox全选,全不选,反选方法, jquery checkbox全选只能操作一次, jquery checkbox全选只有第一次成功 >>>>>&g ...
- Jquery取属性值（复选框、下拉列表、单选按钮）、做全选按钮、JSON存储、去空格
1.jquery取复选框的值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
- jQuery实现全选与全不选功能
初始时: 实现功能后: 实现该功能的核心代码: <script> $(function(){ $("#selectBtn").click(function(){ con ...
随机推荐
- tee - 从标准输入写往文件和标准输出
总览 (SYNOPSIS) tee [OPTION]... [FILE]... 描述 (DESCRIPTION) 把 标准输入 的 数据 复制到 每一个 文件 FILE, 同时 送往 标准输出. -a ...
- Web安全之环境搭建
一. 工具集:Linux: Kali最新版(A/P:root/toor).Windows7/10. 靶机:OWASP_BWA(A/P:root/owaspbwa).DVWA.Mutillidae.We ...
- spring接收文件资源
提交请求的contentType为multipart/form-data 图片提交在form中的名称为file 后端接收示例 @RequestMapping("/picture") ...
- Flink Kafka Connector 与 Exactly Once 剖析
Flink Kafka Connector 是 Flink 内置的 Kafka 连接器,它包含了从 Kafka Topic 读入数据的 Flink Kafka Consumer 以及向 Kafka T ...
- 建模+线性dp——cf1201D
这类题目要首先把模型建立起来,挑选一个好的状态能让dp方程简化很多 /* dp[i][0]表示从右到左,最后停在左端 dp[i][1]表示从左到右,最后停在右端 dp[i+1][0]=min(dis( ...
- Linux服务器的16个监控命令
想不想知道你的服务器到底在干什么?那么你要知道本文介绍的这些基本命令.一旦你熟悉掌握了这些命令,就为成为专业的 Linux系统管理员打下了基础. 你可以通过图形化用户界面(GUI)程序来获取这些外壳命 ...
- RRT路径规划算法（matlab实现）
基于快速扩展随机树(RRT / rapidly exploring random tree)的路径规划算法,通过对状态空间中的采样点进行碰撞检测,避免了对空间的建模,能够有效地解决高维空间和复杂约束的 ...
- MySql在建立索引优化时需要注意的问题
MySql在建立索引优化时需要注意的问题 设计好MySql的索引可以让你的数据库飞起来,大大的提高数据库效率.设计MySql索引的时候有一下几点注意: 1,创建索引 对于查询占主要的应用来说,索引显得 ...
- css 导航样式
html 结构 <div class="nav-menu float-r"> <ul class="menu-item"> <l ...
- Eclipse lombok get set方法报错
在maven仓库中找到 lombok jar包 如:C:\Program File\.m2\Repository\org\projectlombok\lombok\1.18.2\lombok-1.18 ...