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 ...
随机推荐
- RemoTing 搭建简单实现
今天对C# Remoting进行了初步的学习,废话不说... RemotingModel: Talker.cs using System;using System.Collections.Generi ...
- cmake 加入调试信息
1 首先在CMakeLists.txt中加入 SET(CMAKE_BUILD_TYPE "Debug")1在下面加入: SET(CMAKE_CXX_FLAGS_DEBUG &quo ...
- STL_set
#include <iostream> #include <set> #include <string> #include <cstdio> using ...
- 第2篇Kubernetes架构
一.Kubernetes 架构: Kubernetes Cluster 由 Master 和 Node 组成,节点上运行着若干 Kubernetes 服务. Master 节点 Master 是 ...
- php操作redis--字典（hash）篇
常用函数:hSet,hGet,hGetAll等. 应用场景:存储用户信息对象数据,包括id,姓名,年龄和生日,通过用户id来获取姓名,年龄等信息. 连接 $redis = new Redis(); $ ...
- 【TCP】TCP状态
下图所示,TCP通信过程包括三个步骤:建立TCP连接通道(三次握手).数据传输.断开TCP连接通道(四次挥手). 这里进一步探究TCP三路握手和四次挥手过程中的状态变迁以及数据传输过程.先看TCP状态 ...
- PHP FILTER_VALIDATE_FLOAT 过滤器
定义和用法 FILTER_VALIDATE_FLOAT 过滤器把值作为浮点数来验证. Name: "float" ID-number: 259 实例 <?php $var=1 ...
- js 读取本地文件（必须通过input控件才能实现） 及 下载文件
js 操作 文件的实现原理: 1.js是不能直接操作(读写)文件的,html的 input[type="file"] 控件是可以读取文件数据(获取文件数据流)的.js可以获取这个 ...
- [bzoj2729][HNOI2012]排队 题解 (排列组合 高精)
Description 某中学有 n 名男同学,m 名女同学和两名老师要排队参加体检.他们排成一条直线,并且任意两名女同学不能相邻,两名老师也不能相邻,那么一共有多少种排法呢?(注意:任意两个人都是不 ...
- 牛客Another Distinct Values
题目 我一开始试了一下n=3,发现不行,于是就猜测只有2可以,交了一发,通过了50%.所以我猜测只有偶数可以,奇数都不行. 中间空白部分放n=2的情况就行.因为n=2的情况时,最大只有2,所以我们可以 ...