前段时间做了一个全选和反选的功能,最近不忙了,做了一个简化版的demo。

全部代码如下:

<!DOCTYPE html>
<html>
<head>
<title>全选反选</title>
<style type="text/css">
ul,li{
list-style: none;
}
.btn {
margin-left: 40px;
}
</style>
</head>
<body>
<ul id="music"></ul>
<hr>
<div class="btn">
<label id="all">
<input type="checkbox" name="all">全选
</label>
<label id="reverse">
<input type="checkbox" name="reverse">反选
</label>
</div>
<pre></pre>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){ var data = [
'01.大海 ',
'02.天路 ',
'03.再回首 ',
'04.突然的自我 ',
'05.甘心情愿 ',
'06.光辉岁月 ',
'07.雨蝶 ',
'08.爱拼才会赢 ',
'09.我只在乎你 ',
'10..日不落'
]; var html = '';
for(var i = 0; i < data.length; i++){
html += '<li>'+
'<input type="checkbox" name="">'+
'<span>' + data[i] + '</span>'+
'</li>';
}
$('#music').html(html); var $all = $('#all input');
var $reverse = $('#reverse input'); var $checkboxEl = $('#music').find('input[type="checkbox"]');
var len = $checkboxEl.length; var n = 0; //input checkbox 选中的个数
$checkboxEl.on('click', function(){
if($(this).attr("checked") == 'checked'){
$(this).attr("checked", false);
n--;
}else{
$(this).attr("checked", true);
n++;
}
allIsChecked();
}); $all.on('click', function(){
if($(this).attr("checked") == 'checked'){
$(this).attr("checked", false);
$checkboxEl.attr('checked', false);
$checkboxEl.prop('checked', false);
n = 0;
}else{
$(this).attr("checked", true);
$checkboxEl.attr('checked', true);
$checkboxEl.prop('checked', true);
n = len;
}
}); $reverse.on('click', function(){
$checkboxEl.each(function(i, el){
if($(this).attr("checked") == 'checked'){
$(this).attr("checked", false);
$(this).prop("checked", false);
n--;
}else{
$(this).attr("checked", true);
$(this).prop("checked", true);
n++;
}
});
allIsChecked();
}); function allIsChecked(){
if(n == len){
$all.attr('checked', true);
$all.prop('checked', true);
}else{
$all.attr('checked', false);
$all.prop('checked', false);
}
} })
</script> </body>
</html>

jQuery 全选和反选demo的更多相关文章

  1. Jquery全选与反选checkbox(代码示例)

    今天在公司要实现操作权限的功能,需要根据左边的树,选择一项,判断右边的操作权限,例如,增加,修改,删除,查看等按钮的显示与隐藏: 这个功能实现思路如下: 1.操作权限:增加.修改等按钮的ID和Text ...

  2. Jquery 全选、反选问题解析

    最近工作中,需要使用Jquery实现复选框的全选和反选,本人虽然不是专职撸前端的,但这个小问题感觉也没什么难度,下面直接上代码: <div id="list"> < ...

  3. jquery 全选、反选、获取值、背景行、隔行变色和鼠标略过变色变色全特效

    好久没有写东西了,当然不是没东西可写,只是没有时间写.今天抽出点时间来把我最近使用的一些 Javascript 特效的东西贴出来,供自己或者别人查询使用.最近我在做一个新的 B/S 系统,由于没有专门 ...

  4. jQuery全选与反选,且解决点击只执行一次的问题

    <html> <head> <script src="jquery-1.11.1.min.js" type="text/javascript ...

  5. Jquery 全选、反选

    jQuery 1.9以后用 prop(); 不用attr 等 $(function() { $('#inputCheck').click(function() { $("input[name ...

  6. jQuery全选、反选、全不选

    原文链接:https://yq.aliyun.com/articles/33443 HTML内容部分: <ul id="items"> <li> <l ...

  7. jQuery 全选 正反选

    <script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript&quo ...

  8. 基于jquery 全选、反选、各行换色、单击行选中事件实现代码

    <script language="javascript"> $(document).ready(function(){ //各行换色 $('table tr:odd' ...

  9. Jquery 全选、反选问题的记录

    <div id="list"> <ul id="choseList" > <li><input type=" ...

随机推荐

  1. qq 面对面传文件,应用

    使用方式:打开qq,点击右上角里面的面对面传 传输内容:应用,文件 好处:不耗流量,快速

  2. Sleepy Game CodeForces - 936B

    大意: 给定有向图, 初始点S, 两个人轮流移动, 谁不能移动则输, 但后手睡着了, 先手可以控制后手操作, 求最后先手结果. 刚开始看错了, 还以为后手也是最优策略.... 实际上判断是否有偶数个节 ...

  3. Vue2.X 通过 ajax 获取 API 数据(非 axios)

    不多废话,笔记如下 1. javascript: let vm = new Vue({ el: '#card-text', data: { info: '' }, beforeCreate: func ...

  4. Django实现websocket完成实时通讯

    一 什么是Websocket WebSocket是一种在单个TCP连接上进行全双工通信的协议 WebSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据.在WebS ...

  5. 使用CSS设置背景图片,图片比较大,完全显示在一个DIV中

    做的时候想要边框为比较好看的样式,需要UI切图并且放在div中,看起来会好看点 像这样的,我随便挑选了一个,UI帮我切图出来 需要把这个图片填到相应的div里面,但是很显然碰到一个问题,图片太大,而且 ...

  6. vue组件之子组件和父组件

    在看官网和学习的过程中,有些不明确子组件和父组件的定义,为了方便后期学习和理解去网站上搜索了一下相关的解释 1.使用的地方是父组件,定义的地方是子组件,虽然他们是同一个组件 2.Vue.compone ...

  7. linux命令详解——ftp

    ftp服务器在网上较为常见,Linux ftp命令的功能是用命令的方式来控制在本地机和远程机之间传送文件,这里详细介绍Linux ftp命令的一些经常使用的命令,相信掌握了这些使用Linux 进行ft ...

  8. The Multilinear Structure of ReLU Networks

    两种非常常见的非线性单元:rectified linear units (ReLUs) 和 leaky ReLUs 我们选取binary hinge loss进行二分类 对于多分类,我们可以定义mul ...

  9. 页面内置函数${fn:}

    引入头文件<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions " %&g ...

  10. leetcode上题目的分类

    leetcode链表部分题目 https://zhuanlan.zhihu.com/p/29800285 <[Leetcode][链表]相关题目汇总/分析/总结> leetcode堆部分题 ...