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 ...
随机推荐
- IDEA Caused by: java.lang.OutOfMemoryError: PermGen space
错误:OutOfMemoryError: PermGen space 非堆溢出(永久保存区域溢出) 解决方法: 在Run/Debug configuration 的你要运行行的tomcat里面的 vm ...
- 编译错误提示PATH_MAX未声明
解决办法: grep一下,发现PATH_MAX在limits.h中定义,在/scripts/mod/sumversion.c中添加#include <limits.h>即可. #inclu ...
- ubtuntu下虚拟环境搭建【python】
为什么要搭建虚拟环境? 在开发过程中, 当需要使用python的某些工具包/框架时需要联网安装 比如联网安装Flask框架flask-0.10.1版本 sudo pip install flask== ...
- spring framework三个版本的下载包区别
docs:该文件夹下包含Spring的相关文档.开发指南及API参考文档:dist:该文件夹下包含Spring jar包.文档.项目等内容:schema:里面包含了Spring4所用到的xsd文件:
- 4、Python 基础类型 -- Tuple 元祖类型
Python 元组 Python的元组与列表类似,不同之处在于元组的元素不能修改. 元组使用小括号,列表使用方括号. 元组创建很简单,只需要在括号中添加元素,并使用逗号隔开即可. 如下实例: 实例(P ...
- 分享linux中导入sql文件的方法
为使用阿里云主机,没有装ftp,也没有装phpmyadmin,所以一切都得靠命令行.转移网站的重要一步就是转移数据库,这里简单介绍一下如何在这种情况下导入sql文件 因导出sql文件 在你原来的网站服 ...
- Delphi DBgrid 动态点击事件
错误的写法: DBGrid1CellClick(DBGrid1.Columns[ DBGrid1.DataSource.DataSet.RecNo ]); //执行点击事件 正确的写法: DBGrid ...
- Ext——xtype各组件类型
Ext.form.TextField的 xtype类型
- GO语言延迟函数defer用法分析
这篇文章主要介绍了GO语言延迟函数defer用法,较为详细的分析了GO语言的特性与具体用法,并给出了一个比较典型的应用实例,具有一定的参考借鉴价值,需要的朋友可以参考下 本文实例讲述了GO语言延迟 ...
- 关于Python中函数的使用
函数的概念 # 概念 # 写了一段代码实现了某个小功能; 然后把这些代码集中到一块, 起一个名字; 下一次就可以根据这个名字再次使用这个代码块, 这就是函数 # 作用 # 方便代码的重用 # 分解任务 ...