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 ...
随机推荐
- Android中XML的命名空间、自定义属性
命名空间(namespace) XML 命名空间提供避免元素命名冲突的方法. 举个例子,A学校有名学生叫做林小明,B学校也有名学生叫林小明,那我们如何识别这两名拥有相同名字的同学呢?这时候命名空间就派 ...
- HTTP/2的优先级
前言 记得HTTP/3即将标准化了.今日早读文章由@smallbonelu翻译授权分享. @smallbonelu,一枚爱好跑步的前端工程师 正文从这开始-- 以正确的顺序请求页面资源对于快速的用户体 ...
- webpack devServer配置项的坑
本文所用webpack版本为4+,阅读本章的同学请注意区分. webpack默认不需要配置文件 但是你仍可在项目的node_module目录同级目录建立一个webpack.config.js文件进行配 ...
- Yii2中应用子模块下的内容
public function actionIndex(){ $article=\YII::$app->getModule('article'); $article->runAction( ...
- sql 关系模型
我们已经知道,关系数据库是建立在关系模型上的.而关系模型本质上就是若干个存储数据的二维表,可以把它们看作很多Excel表.直线电机厂家 表的每一行称为记录(Record),记录是一个逻辑意义上的数据. ...
- express简易代理请求
var express = require('express') var app = express() var proxy = require('http-proxy-middleware') va ...
- OS: 生产者消费者问题(二) ---- 系统V IPC通信-信号量和共享内存
在上一篇“OS: 生产者消费者问题(多进程+共享内存+信号量)”中提到的方法二: 如果进程之间并没有父子关系,但是协商好了共享存储的 KEY , 那么在每个进程中,就可以通过 KEY 以及 shmge ...
- Linux-vim编辑器 常用命令 复制粘贴
Linux-vim编辑器 一.vim三种工作模式 1.1.命令模式 在此模式下,可以使用上.下.左.右键或者 k.j.h.l 命令进行光标移动,还可以对文件内容进行复制.粘贴.替换.删除等操作. 1. ...
- nginx代理一个服务器上所有域名
1. 主配置文件不需要更改任何配置2. 在vhosts目录下需要建立两个文件,一个是servername 列表文件,一个是虚拟主机配置文件两个文件内容分别为 #() servername server ...
- shell cat 合并文件，合并数据库sql文件
> 覆盖写入 >> append模式写入 ###################################################################合并数 ...