转：jQuery全选、反选与获取选中值

最新推荐文章于 2022-08-29 21:58:42 发布
最新推荐文章于 2022-08-29 21:58:42 发布
阅读量111 收藏
点赞数
分类专栏： JQuery 转 文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wjiaoling136/article/details/84718250
版权
转 同时被 2 个专栏收录
67 篇文章 0 订阅
订阅专栏
JQuery
18 篇文章 0 订阅
订阅专栏

一直想写这么个特效来着，一直没写，今天看到有人发了挺全效果也挺好，就果断的转了。

 

转载链接：http://www.iteye.com/topic/1138022

 

1、页面布局：

<body>
<ul id="list">  
   <li><label><input type="checkbox" value="1" /> 1.老男孩</label></li>  
   <li><label><input type="checkbox" value="2" /> 2.我最亲爱的</label></li>  
   <li><label><input type="checkbox" value="3" /> 3.邂逅</label></li>  
   <li><label><input type="checkbox" value="4" /> 4.心痛2013</label></li>  
   <li><label><input type="checkbox" value="5" /> 5.要爱爱</label></li>  
   <li><label><input type="checkbox" value="6" /> 6.怎么说我不爱你</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" />
</body>

2、JS：

<script type="text/javascript">
            $(function() {
                //全选或全不选
                $("#all").click(function() {
                    if (this.checked) {
                        $("#list :checkbox").attr("checked", true);
                    } else {
                        $("#list :checkbox").attr("checked", false);
                    }
                });
                //全选  
                $("#selectAll").click(function() {
                    $("#list :checkbox,#all").attr("checked", true);
                });
                //全不选
                $("#unSelect").click(function() {
                    $("#list :checkbox,#all").attr("checked", false);
                });
                //反选 
                $("#reverse").click(function() {
                    $("#list :checkbox").each(function() {
                        $(this).attr("checked", !$(this).attr("checked"));
                    });
                    allCheck();
                });

                //设置全选复选框
                $("#list :checkbox").click(function() {
                    allCheck();
                });

                //获取选中选项的值
                $("#getValue").click(function() {
                    var valArr = new Array;
                    $("#list :checkbox[checked]").each(function(i) {
                        valArr[i] = $(this).val();
                    });
                    var vals = valArr.join(',');
                    alert(vals);
                });
            });
            function allCheck() {
                var num_all = $("#list :checkbox").size(); //选项总个数
                var num_checked = $("#list :checkbox:checked").size(); //选中个数
                if (num_all == num_checked) { //若选项总个数等于选中个数 
                    $("#all").attr("checked", true); //全选选中
                } else {
                    $("#all").attr("checked", false);
                }
            }
</script>

 

wjiaoling136
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
转：SQL Server：获取当前日期是本月的第几周
总有一天，你的日积月累，会成为别人的望尘莫及
10-27 6861
原文转载链接找不着了。 以下问转载内容： 第一种：   --获取当前日期是本月的第几周 --测试：select dbo.getMonthWeek(getdate()) 结果:10月的第2周 CREATE function [dbo].[getMonthWeek](@d datetime) returns varchar(20) as begin declare @retur...
转：右键新建中没有Word、Excel、PPT等怎么办
总有一天，你的日积月累，会成为别人的望尘莫及
03-26 4517
转载自：https://jingyan.baidu.com/article/1974b28985d4bbf4b0f77458.html   转载内容如下： 很多朋友在安装好Office（2010或2013等）之后，发现右键新建中没有Word、Excel、PowerPoint等项，但是自己的Office却明明安装好了。这个时候该怎么办呢？这里，本文为大家提供一种简单的解决方法。   1、...
jQuery全选、反选与获取选中值
04-04
jQuery全选、反选与获取选中值
全选、反选、获取选中值
weixin_33675507的博客
06-19 316
<html><head><title></title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> ...
用jQuery实现复选框全选、反选与获取选中的复选框的值
lzy_55的博客
08-29 1903
和js实现的步骤一样，先是实现全选，再是反选，最后创建函数，储存已选中的反选框的值再在全选反选中调用函数。用jQuery实现以上效果要比js简单的多。
jQuery全选、反选与获取选中值 源码下载
11-22
本篇文章将详细讲解如何利用jQuery实现全选、反选功能，并介绍如何获取选中项的值。这在构建网页表单或者需要用户多选操作的场景中非常常见。 首先，让我们理解全选和反选的基本概念。全选意味着选定所有可选项，而...
jquery全选反选全不选案例
04-04
"jquery全选反选全不选案例" 是一个常见的交互功能，常见于表格或者列表中，允许用户一键选择或取消所有选项。这个功能在数据筛选、批量操作等场景下非常实用。 实现这一功能的关键在于理解 jQuery 中的选择器和...
Jquery 全选反选实例代码
11-25
本文给大家分享一段基于jQuery的全选、反选和不选功能的代码，适用于网页多选后需要进行批量操作的场景（如批量删除等）。文章结合实例，代码简洁，基本覆盖选项选择操作的方方面面，希望可以帮到有需要的WEB爱好者...
转：Sqlserver数据库还原一直显示“正在还原…”解决方法
热门推荐
总有一天，你的日积月累，会成为别人的望尘莫及
12-15 1万+
转载自：http://www.php230.com/1413283921.html 转载内容如下： 今天在Sqlerver还原数据库时一直就卡在那里提示“正在还原…”的状态，此时无法操作数据库,下面我来给大家介绍解决些问题的方法解决方法： RESTORE DATABASE demo FROM DISK = 'D:/demo.bak' WITH MOVE 'demo' TO 'd:/...
转：win10创建系统还原点及使用系统还原点进行系统还原
总有一天，你的日积月累，会成为别人的望尘莫及
02-08 2229
转载链接：http://www.3lian.com/edu/2016/08-15/1471233011316899.html PS：原文有图有真相，我这里只是写个过程。 一、创建还原点： 先启动系统保护。 1、右击“此电脑”----》属性----》系统保护； 2、切换到“系统保护”选项卡，在“保护设置”面板选中需要创建还原点的磁盘（通常为C盘，因为系统一般都装在C盘），点击下边的“配...
转：使用Java生成缩略图
总有一天，你的日积月累，会成为别人的望尘莫及
06-13 2186
生成缩略图的代码主要来源于：http://www.cnblogs.com/digdeep/p/4829471.html 有根据自己的业务进行封装，基本业务如下：图片上传之后，根据图片的原始宽度和系统设定的缩略图最大宽度计算出一个缩放比例，再根据这个比例计算缩略图的高度，最后在同目录下重绘出缩略图。 具体代码如下： public class ThumImgUtil { private...
转：JS-正斜杠和反斜杠的转换
总有一天，你的日积月累，会成为别人的望尘莫及
01-11 2086
转载链接：https://www.cnblogs.com/zqn518/p/6707415.html   将正斜杠转换成反斜杠： var url = "http://localhost:64177/Home/AccordionIndex"; url = url .replace("\/\/", "\\\\");url = url .replace("\/", "\\");url = ur...
转：解决浏览器Adobe Flash Player不是最新版本问题
总有一天，你的日积月累，会成为别人的望尘莫及
03-14 1815
这几天弄SWFUpload控件不能兼容火狐的问题，无意中扯出了这个flash的问题。众所周知，SWFUpload控件是利用flash进行文件上传的，这也是它兼容多种浏览器的原因。但是它对浏览器中flash的版本要求比较高，必须安装且是最新的。   SWFUpload控件在谷歌里边运行，若flash不是最新的，那么显示flash的地方就会变成一个小拼图的模样，一看就知道flash有问题。但是火...
转：SQL多条件模糊查询解决方案(类似百度搜索)
总有一天，你的日积月累，会成为别人的望尘莫及
12-21 1753
原文转载自：http://blog.csdn.net/yangyuankp/article/details/8085514   前言：算法的基本特性在前几篇博客中已经做了详细的说明，经过不断的改进优化，到归仓的时候了，也就是说，该算法告一段落，不再更新。作为最终的解决方案，简要的总结一下算法特性，以方便读者参阅。       目的：主要用于多条件模糊匹配。贪婪特性：返回满足条件尽可能多的记录...
转：java保留两位小数4种方法
总有一天，你的日积月累，会成为别人的望尘莫及
10-12 1692
原文转载自：http://www.cnblogs.com/chenrenshui/p/6128444.html 以下为转载内容： import java.math.BigDecimal; import java.text.DecimalFormat; import java.text.NumberFormat; public class format { double f = 1...
转：使用Java将Excel 列号数字与字母互相转换
总有一天，你的日积月累，会成为别人的望尘莫及
11-09 1576
转载自：http://blog.csdn.net/u010571844/article/details/46806265 转载内容（有修改）： public class ExcelColumn { public static void main(String[] args) { String colstr = "B"; int colIndex ...
jquery 全选反选 并且获取所有值
最新发布
09-14
使用jQuery实现全选和反选功能，并获取所有选中的值有以下几个步骤： 1. 添加全选和反选的HTML代码： ```html <input type="checkbox" id="selectAll">全选 <input type="checkbox" name="checkbox" value="1">选项1 <input type="checkbox" name="checkbox" value="2">选项2 <input type="checkbox" name="checkbox" value="3">选项3 ``` 2. 使用jQuery编写全选和反选功能的事件处理程序： ```javascript // 全选和反选功能 $("#selectAll").change(function() { $("input[name='checkbox']").prop("checked", $(this).prop("checked")); }); // 获取所有选中的值 function getSelectedValues() { var values = []; $("input[name='checkbox']:checked").each(function() { values.push($(this).val()); }); return values; } ``` 3. 在需要的时候调用`getSelectedValues()`函数来获取所有选中的值： ```javascript var selectedValues = getSelectedValues(); console.log(selectedValues); // 输出所有选中的值 ``` 这样就可以实现jquery全选和反选，并获取所有选中的值。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值