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. JavaScript 变量屏蔽

    不同作用域中相同名称的变量就会触发变量屏蔽: { let x = {color:"blue"}; let y = x; let z = 3; { //重复定义x,所以对全局变量x进 ...

  2. js备战春招の四の表单

    表单验证:required="required"(浏览器自动验证) javascript表单验证: <input id="numb">这条html标 ...

  3. Linux IPMI 配置管理.md

    DELL 服务器 user id 范围:1-16 可以修改用户名和密码 不允许用户名重复 当设置一个已存在的用户名时,无论user id在前或在后,修改密码会将该项用户名设置为空,enable会恢复成 ...

  4. 关于ASP.NET MVC的js和css资源管理

    本文来源于博客园-钱智慧,转载请注明出处 通过这篇文章和这个回答,我们总结如下: 浏览器针对一个域名,最多只会开启6个线程来加载文件,比如head中如果有7个引入文件(js文件或者css文件)的标签, ...

  5. MySql (MariaDB)的varchar字段的存储的是字符还是字节

    关于varchar字段: 在version4之前,按字节: version5之后,按字符. 现在普遍都按字符算:无论中文英文,都算一个字符 既: varchar(10) == '123456789a' ...

  6. TCHAR字符串查找&反向查找字符串

    C++支持两种字符串,即常规的ANSI编码("字符串")和Unicode编码(L"字符串"),相应的就有两套字符串处理函数,比如:strlen和wcslen,分 ...

  7. 笔记:Maven 生成项目站点

    Maven 不仅仅时一个自动化构建工具和一个依赖管理工具,他还能够帮助聚合项目信息,促进团队间的交流,POM 可以包含各种项目信息,如项目描述.版本控制系统地址.缺陷跟踪系统地址.许可证信息.开发者信 ...

  8. 什么是DOM,DOM level 1\2\3 的区别是什么

    DOM 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.Document Object Model的历史可以追溯至1990年 ...

  9. 【Windows】定时任务设置

    Windows定时任务 linux上面的定时任务已经解除过好多次了.不外乎crontab,at之类的命令,而windows上的定时任务今天才偶尔看到怎么设置.想到以后生活上可能会用到一些这方面的知识就 ...

  10. MAVEN打包报错:com.sun.net.ssl.internal.ssl;sun.misc.BASE64Decoder;程序包 javax.crypto不存在处理办法

    以下是pom.xml里面的完整配置,重点是红色的部分,原因是引用的jar是jre下边的,而打包环境用的是jdk下边的jar,所以引用下就OK了.<build> <plugins> ...