html:

<dl>
<dt><input type="checkbox" id="checkAll" /><label>全选</label><a href="javascript:;" id="no">反选</a></dt>
<dd>
<p><input type="checkbox" name="item" /><label>选项(一)</label></p>
<p><input type="checkbox" name="item" /><label>选项(二)</label></p>
<p><input type="checkbox" name="item" /><label>选项(三)</label></p>
<p><input type="checkbox" name="item" /><label>选项(四)</label></p>
<p><input type="checkbox" name="item" /><label>选项(五)</label></p>
<p><input type="checkbox" name="item" /><label>选项(六)</label></p>
<p><input type="checkbox" name="item" /><label>选项(七)</label></p>
<p><input type="checkbox" name="item" /><label>选项(八)</label></p>
<p><input type="checkbox" name="item" /><label>选项(九)</label></p>
<p><input type="checkbox" name="item" /><label>选项(十)</label></p>
</dd>
</dl>
<center>1、切换全选/全不选文字;2、根据选中个数更新全选框状态;</center>

css:

    body,dl,dt,dd,p{margin:;padding:;}
body{font-family:Tahoma;font-size:12px;}
label,input,a{vertical-align:middle;}
label{padding:0 10px 0 5px;}
a{color:#09f;text-decoration:none;}
a:hover{color:red;}
dl{width:120px;margin:10px auto;padding:10px 5px;border:1px solid #666;border-radius:5px;background:#fafafa;}
dt{padding-bottom:10px;border-bottom:1px solid #666;}
dt label{font-weight:;}
p{margin-top:10px;}

jquery:

$(document).ready(function () {
console.log($('input[name="item"]'));
$('#checkAll').click(function () {
if ($(this).is(':checked')) {
$(":checkbox").each(function () {
$(this).prop('checked', true);
})
} else {
$(':checkbox').each(function () {
$(this).removeAttr('checked');
})
}
})
$('#no').click(function () {
$('input[name="item"]').each(function () {
if ($(this).is(':checked')) {
$(this).removeAttr('checked');
} else {
$(this).prop('checked', true);
}
})
})
$('input[name="item"]').click(function () {
var current = parseInt($(':checked').length);
var all = parseInt($('input[name="item"]').length);
console.log("current:" + current);
console.log("all:" + all);
if (current != all) {
$('#checkAll').removeAttr('checked');
} else {
$('#checkAll').prop('checked', true);
}
})
})

JavaScript-Jquery实现全选反选的更多相关文章

  1. python: jquery实现全选 反选 取消

    引入这个jquery-1.12.4.js jquery实现全选 反选 取消 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitio ...

  2. jquery实现全选/反选功能

    <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...

  3. jquery 书写全选反选功能

    书写一个后台管理中用到的全选反选功能.代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  4. jQuery实现全选/反选和批量删除

    <%@ page language="java" contentType="text/html; charset=utf-8"     pageEncod ...

  5. JavaScript Web API 全选反选案例

    全选反选 全选和反选功能,在开发中可以说是应用得非常多的,以下通过案例分解,学习如何使用JS实现全选反选功能. 该功能可分为如下三大步骤: 1.全选 1.1 获取父checkbox,注册点击事件 1. ...

  6. jQuery实现全选反选功能

    废话不说,直接上代码! <html> <head> <meta http-equiv="Content-Type" content="tex ...

  7. jquery 实现全选反选

    jquery代码 $(function () { $('#inputCheck').click(function () { if ($(this).attr("checked")) ...

  8. jquery checkbox 全选反选代码只能执行一遍,第二次就失败

    遇到问题背景: 在写到购物车的全选交互的时候,商品选中的状态只有在第一次的时候可以,第二次就无法选中:(代码如下) $(".chooseall").click(function() ...

  9. jquery实现全选 反选 取消

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. 新版本的jquery checkbox 全选反选代码只能执行一遍,第二次就失败attr与prop区别

    $("#all_check").click(function() { $("input[name='checkShop[]']").attr("che ...

随机推荐

  1. Windows cmd命令反斜杠问题

    在Windows的终端输入命令的时候,如果在命令中存在斜杠就无法执行,因为它只支持反斜杠,而在Unix系统中是支持斜杠的,这是两者的区别.所以在Windows终端下执行命令需要注意斜杠问题

  2. windows下安装mysql以及启动

    配置环境变量,在path中添加 ;E:\wamp\Apache24\mysql(这是你的mysql安装路径),然后在修改一下配置文件my-default.ini(mysql安装文件夹目录下) 修改其中 ...

  3. 移动端HTML5性能优化

    移动端HTML5性能优化 [导读] 得益于智能手机的普及和各行各业互联网+的运动,移动端的市场占比疯狂增长. 2016年1月发布的2015年电商数据显示,2015年中国移动端网购交易额同比暴涨123 ...

  4. spring cloud 专题一 (spring cloud 入门搭建 之 Eureka注册中心搭建)

    一.前言 本文为spring cloud 微服务框架专题的第一篇,主要讲解如何快速搭建spring cloud微服务及Eureka 注册中心 以及常用开发方式等. 本文理论不多,主要是傻瓜式的环境搭建 ...

  5. Vue中axios的使用技巧配置项详解

    使用axios首先要下载axios模块包 npm install axios --save 其次需要在使用的文件中引入 import axios from 'axios' 一.调用axios常见两种方 ...

  6. ~psd面试 求最长回文序列 DP求解

    链接:https://www.nowcoder.com/acm/contest/90/D来源:牛客网 掌握未来命运的女神 psd 师兄在拿了朝田诗乃的 buff 后决定去实习. 埃森哲公司注册成立于爱 ...

  7. Linux chgrp命令

    在lunix系统里,文件或目录的权限的掌控以拥有者及所诉群组来管理.可以使用chgrp指令取变更文件与目录所属群组,这种方式采用群组名称或群组识别码都可以.Chgrp命令就是change group的 ...

  8. STL --> find()和find_if()

    find()和find_if() 一.find()函数 find(first, end, value); // 返回区间[first,end)中第一个值等于value的元素的位置.如果没有找到匹配元素 ...

  9. 安装Oracle客户端和plsql

    Oracle 客户端安装 +  pl/sql工具安装配置   Oracle 客户端安装 +  pl/sql工具安装配置 下载oracle客户端,并在本地安装. 11g下载地址为: http://www ...

  10. [css 揭秘]:CSS揭秘 技巧(四):边框内圆角

    我的github地址:https://github.com/FannieGirl/ifannie/ 源码都在这上面哦! 喜欢的给我一个星吧 边框内圆角 问题:有时候我们需要一个容器,只在内侧有圆角,而 ...