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 ...
随机推荐
- svnserve.conf - snvserve 的仓库配置文件
SYNOPSIS 总览 repository-path/conf/svnserve.conf DESCRIPTION 描述 每个代码仓库都有一个 svnserve.conf 文件来控制 svnserv ...
- celery中配置redis密码时的ValueError: invalid literal for int() with base 10: 'xxxx'
原配置: celery_broker = 'redis://:xxxx#xxxx@172.17.0.1:6379/0' # docker0 错误原因: 密码中不能有 # ? 等特殊字符 (无语O__O ...
- HTML事件处理程序---内联onclick事件
HTML事件处理程序绑定方法: <input type="button" value="click me" onclick="show(this ...
- elasticsearch启动问题
ES安装完一直启动不了,问题解决. 报错: ERROR: bootstrap checks failed system call filters failed to install; check th ...
- js中数据操作的某些思想
1,默认数据的复用 写成function的return形式缓存在变量中,用的时候直接执行fun就行了 例如 有文件text.js里面的对象是export default ()=>({aa:55, ...
- TreeSet集合在哪种情况下会报错
1.自然排序中的元素对象,都必须实现了Comparable接口,否则会抛出异常,案例如下: public class MySetTree { public static void main(Strin ...
- springboot输出hello world，3种方式（String，JSON，jsp），IDEA开发工具
新建项目: File -> new -> Project -> Spring Initializr -> Next -> Next -> Next-> Pro ...
- 【转】tomcat优化-有改protocol 和 缓存 集群方案
tomcat优化 在线上环境中我们是采用了tomcat作为Web服务器,它的处理性能直接关系到用户体验,在平时的工作和学习中,归纳出以下七种调优经验. 1. 服务器资源 服务器所能提供CPU.内存.硬 ...
- 树————N叉树的层序遍历
思想: 使用队的思想,将每一层的节点放入队列中,依次弹出,同时将其children放入队列. c++ /* // Definition for a Node. class Node { public: ...
- IDHTTP
Delphi IDHTTP用法详解 一.IDHTTP的基本用法 IDHttp和WebBrowser一样,都可以实现抓取远端网页的功能,但是http方式更快.更节约资源,缺点是需要手动维护cook,连接 ...