JavaScript-Jquery实现全选反选
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实现全选反选的更多相关文章
- python: jquery实现全选 反选 取消
引入这个jquery-1.12.4.js jquery实现全选 反选 取消 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitio ...
- jquery实现全选/反选功能
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...
- jquery 书写全选反选功能
书写一个后台管理中用到的全选反选功能.代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- jQuery实现全选/反选和批量删除
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncod ...
- JavaScript Web API 全选反选案例
全选反选 全选和反选功能,在开发中可以说是应用得非常多的,以下通过案例分解,学习如何使用JS实现全选反选功能. 该功能可分为如下三大步骤: 1.全选 1.1 获取父checkbox,注册点击事件 1. ...
- jQuery实现全选反选功能
废话不说,直接上代码! <html> <head> <meta http-equiv="Content-Type" content="tex ...
- jquery 实现全选反选
jquery代码 $(function () { $('#inputCheck').click(function () { if ($(this).attr("checked")) ...
- jquery checkbox 全选反选代码只能执行一遍,第二次就失败
遇到问题背景: 在写到购物车的全选交互的时候,商品选中的状态只有在第一次的时候可以,第二次就无法选中:(代码如下) $(".chooseall").click(function() ...
- jquery实现全选 反选 取消
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 新版本的jquery checkbox 全选反选代码只能执行一遍,第二次就失败attr与prop区别
$("#all_check").click(function() { $("input[name='checkShop[]']").attr("che ...
随机推荐
- JavaScript 变量屏蔽
不同作用域中相同名称的变量就会触发变量屏蔽: { let x = {color:"blue"}; let y = x; let z = 3; { //重复定义x,所以对全局变量x进 ...
- js备战春招の四の表单
表单验证:required="required"(浏览器自动验证) javascript表单验证: <input id="numb">这条html标 ...
- Linux IPMI 配置管理.md
DELL 服务器 user id 范围:1-16 可以修改用户名和密码 不允许用户名重复 当设置一个已存在的用户名时,无论user id在前或在后,修改密码会将该项用户名设置为空,enable会恢复成 ...
- 关于ASP.NET MVC的js和css资源管理
本文来源于博客园-钱智慧,转载请注明出处 通过这篇文章和这个回答,我们总结如下: 浏览器针对一个域名,最多只会开启6个线程来加载文件,比如head中如果有7个引入文件(js文件或者css文件)的标签, ...
- MySql (MariaDB)的varchar字段的存储的是字符还是字节
关于varchar字段: 在version4之前,按字节: version5之后,按字符. 现在普遍都按字符算:无论中文英文,都算一个字符 既: varchar(10) == '123456789a' ...
- TCHAR字符串查找&反向查找字符串
C++支持两种字符串,即常规的ANSI编码("字符串")和Unicode编码(L"字符串"),相应的就有两套字符串处理函数,比如:strlen和wcslen,分 ...
- 笔记:Maven 生成项目站点
Maven 不仅仅时一个自动化构建工具和一个依赖管理工具,他还能够帮助聚合项目信息,促进团队间的交流,POM 可以包含各种项目信息,如项目描述.版本控制系统地址.缺陷跟踪系统地址.许可证信息.开发者信 ...
- 什么是DOM,DOM level 1\2\3 的区别是什么
DOM 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.Document Object Model的历史可以追溯至1990年 ...
- 【Windows】定时任务设置
Windows定时任务 linux上面的定时任务已经解除过好多次了.不外乎crontab,at之类的命令,而windows上的定时任务今天才偶尔看到怎么设置.想到以后生活上可能会用到一些这方面的知识就 ...
- MAVEN打包报错:com.sun.net.ssl.internal.ssl;sun.misc.BASE64Decoder;程序包 javax.crypto不存在处理办法
以下是pom.xml里面的完整配置,重点是红色的部分,原因是引用的jar是jre下边的,而打包环境用的是jdk下边的jar,所以引用下就OK了.<build> <plugins> ...