jQuery实现复选框的全选、反选功能
- <ul id="list">
- <li><label><input type="checkbox" value="1">text</label></li>
- <li><label><input type="checkbox" value="2">text</label></li>
- <li><label><input type="checkbox" value="3">text</label></li>
- <li><label><input type="checkbox" value="4">text</label></li>
- <li><label><input type="checkbox" value="5">text</label></li>
- <li><label><input type="checkbox" value="6">text</label></li>
- </ul>
- <input type="checkbox" id="all">
- <input type="button" value="全选" class="btn" id="selectAll">
- <input type="button" value="全不选" class="btn" id="unSelect">
- <input type="button" value="反选" class="btn" id="reverse">
- <input type="button" value="获得选中的所有值" class="btn" id="getValue">
jquery代码
- $(function () {
- //全选或全不选
- $("#all").click(function(){
- if(this.checked){
- $("#list :checkbox").prop("checked", true);
- }else{
- $("#list :checkbox").prop("checked", false);
- }
- });
- //全选
- $("#selectAll").click(function () {
- $("#list :checkbox,#all").prop("checked", true);
- });
- //全不选
- $("#unSelect").click(function () {
- $("#list :checkbox,#all").prop("checked", false);
- });
- //反选
- $("#reverse").click(function () {
- $("#list :checkbox").each(function () {
- $(this).prop("checked", !$(this).prop("checked"));
- });
- allchk();
- });
- //设置全选复选框
- $("#list :checkbox").click(function(){
- allchk();
- });
- //获取选中选项的值
- $("#getValue").click(function(){
- var valArr = new Array;
- $("#list :checkbox[checked]").each(function(i){
- valArr[i] = $(this).val();
- });
- var vals = valArr.join(',');
- alert(vals);
- });
- });
- function allchk(){
- var chknum = $("#list :checkbox").size();//选项总个数
- var chk = 0;
- $("#list :checkbox").each(function () {
- if($(this).prop("checked")==true){
- chk++;
- }
- });
- if(chknum==chk){//全选
- $("#all").prop("checked",true);
- }else{//不全选
- $("#all").prop("checked",false);
- }
- }
jQuery实现复选框的全选、反选功能的更多相关文章
- 【jQuery】复选框的全选、反选,推断哪些复选框被选中
本文与<[JavaScript]复选框的全选.反选.推断哪些复选框被选中>(点击打开链接)为姊妹篇,把里面内容再与jQuery框架中实现一次,相同做到例如以下的效果: 布局还是相同的布局, ...
- 一天搞定jQuery(三)——使用jQuery完成复选框的全选和全不选
还记得之前我使用JavaScript来实现复选框的全选和全不选效果吗?如果读者初次翻阅本文,可记得看看教你一天玩转JavaScript(七)——使用JavaScript完成复选框的全选和全不选的效果! ...
- jQuery学习(五)——使用JQ完成复选框的全选和全不选
1.在系统后台进行人员管理时,进行批量删除,使用jq完成全选和全不选 步骤分析: 第一步:引入jquery文件 第二步:书写页面加载函数 第三步:为上面的复选框绑定单击事件 第四步:将下面所有的复选框 ...
- jQuery实现复选框的全选、反选、并且根据复选框的<checked属性>控制多个对应div的显示/隐藏
<!doctype html><html> <head> <meta charset="utf-8"> <title>j ...
- JQ实现复选框的全选反选不选
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Vue复选框的全选
<!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
- jQuery_完成复选框的全选与全不选
别的不多说,直接上代码,用于完成复选框的全选与全不选. <!DOCTYPE html> <html> <head> <meta charset="U ...
- js实现复选框的全选、全不选、反选
js中实现复选框的全选,全不选以及反选,分为两种情况: (1)选中“请选择”前面的复选框实现全选,不选中“请选择”前面的复选框实现全不选 <!DOCTYPE html PUBLIC " ...
- js做全选,用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false
用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false,当所有checkbox都被选中时,全选按钮也被选中. 详解: 有两种 ...
- js实现复选框的全选、全不选和反选
js实现复选框的全选.全不选和反选 主要是用遍历的方法查找元素,然后通过改变checked的属性来选择,为true则是选中状态,为false则是未选状态 实现代码 <!DOCTYPE html& ...
随机推荐
- VALID_FOR in db standby
检查DG 装填: 目标主机检查mrp是否正常: SELECT PROCESS FROM V$MANAGED_STANDBY WHERE PROCESS LIKE 'MRP%';--若mrp没有启动,则 ...
- web.xml中监听器如何顺序加载
最近用到在Tomcat服务器启动时自动加载数据到缓存,这就需要创建一个自定义的缓存监听器并实现ServletContextListener接口, 并且在此自定义监听器中需要用到Spring的依赖注入功 ...
- LeetCode 230 Kth Smallest Element in a BST 二叉搜索树中的第K个元素
1.非递归解法 /** * Definition for a binary tree node. * struct TreeNode { * int val; * TreeNode *left; * ...
- WebSocket Client连接AspNetCore SignalR Json Hub
突然有个需求,需要使用普通的websocket客户端去连接SignalR服务器. 因为使用的是.net core 版的signalr,目前对于使用非signalr客户端连接的中文文档几乎为0,在gay ...
- C# this索引器
- serv-U 7以上版本pasv端口的设置及中文乱码问题
利用serv-u架设ftp服务器已经是再常见不过了事情了,近日一朋友为图新鲜,弄了个7.4版本的新玩意儿,结果架设上去后,仅开了21端口,用LeapFtp在port模式下连接没问题,但是另一常见的cu ...
- Redis中String类型的Value最大可以容纳数据长度
项目中使用redis存储,key-value方式,在Redis中字符串类型的Value最多可以容纳的数据长度是512M 官方信息: A String value can be at max 512 M ...
- DataBinding初探 数据绑定的用法 ,import 集合类型,绑定的表达式,访问集合类型2
数据绑定的用法 import语法 <data> <import type="android.view.view"/> </data> 如 ...
- redhat配置dns服务器bind
配置Oracle11g的RAC需要使用DNS服务器来解析SCAN IP,本文就是以此为例介绍bind服务器的使用.首先科普一下bind服务器,属于企业级产品了,还是开源的: Bind是Berkeley ...
- 转载:Maven实战—Dependencies与DependencyManagement的区别
致敬作者,支持原创.原文地址:https://www.cnblogs.com/feibazhf/p/7886617.html 在上一个项目中遇到一些Jar包冲突的问题,之后还有很多人分不清楚Depen ...