jQuery对于全选，全不选，反选的实现

最新推荐文章于 2021-10-30 11:11:45 发布
最新推荐文章于 2021-10-30 11:11:45 发布
阅读量89 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://my.oschina.net/u/3628722/blog/1491806
版权

网页效果图如下：

可以点击按钮实现相对应的效果

231743_d8Uf_3628722.png

html代码如下：

231856_D5oa_3628722.png

javascript代码如下：

231957_eR3h_3628722.png

这个效果主要是运用到prop属性及removeProp属性

编写的思路如下：

1，分别给三个按钮添加点击事件

2，利用checkbox以及checked的属性进行判断操作

 

 

 

 

转载于:https://my.oschina.net/u/3628722/blog/1491806

chensuohu3920
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JQuery实现全选、全不选、反选功能
12-12
JQuery实现全选、全不选、反选功能 1、当点击'全选'按钮时，页面中所有的复选框都应该为选中状态， 1.1、当再次点击'全选'按钮时，所有的复选框应该是非选中状态。 1.2、当点击子复选框时，'全选'按钮应该是非选中状态。 2、当选中当前页面的所有子复选框时，'全选'按钮应该是'选中'状态。 3、点点击'全不选'按钮时，当前页面的所有复选框置为非选中状态。 4、当点击'反选'按钮时，当前页面选中状态的复选框置为未选中状态，未选中状态的复选框置为选中状态。
JQuery实现全选、全不选和反选功能
热门推荐
林小米的博客
12-12 4万+
项目中需要做一个全选、全不选和反选的功能。刚接到这个需求的时候，心想很简单的一个功能，几行代码就能搞定，然而事实并非如此。下面就把我的思路说一下： 1、当点击'全选'按钮时，页面中所有的复选框都应该为选中状态，        1.1、当再次点击'全选'按钮时，所有的复选框应该是非选中状态。        1.2、当点击子复选框时，'全选'按钮应该是非选中状态。 2、当选中当前页面的
jQuery实现全选全不选反选
qq_39845198的博客
03-06 676
<head> <meta charset="UTF-8"> <title>全选全不选反选</title> <script type="text/javascript" src="../jquery-1.7.2.js"></script> <script type="text/javascript"> `` ```javascript $(function () { //全选
jQuery 实现全选、全不选、反选 功能
VirgoYellow 的专栏
08-30 307
方法：使用 prop() 来设置 "checked" 属性的值，true 为选中，false 为未选中，在整个全选、反选过程中注意处理全选复选框的选中状态。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" cont...
jQuery实现全选全不选和反选
hyb0852的专栏
04-01 399
表单的全选和反选 $(function(){     $("#checkAll").click(function(){     $(":checkbox").attr("checked",true); });     $("#checkNo").click(function(){     $(":checkbox").attr("checked",false); });
jquery 实现全选，全不选，反选，获取选中的值
12-19
对于“全选”、“全不选”和“反选”功能，jQuery 提供了简洁的解决方案，同时也可以方便地获取选中的元素值。以下我们将详细探讨如何使用 jQuery 实现这些功能。 1. **全选**： 全选功能通常应用于具有多选选项的...
基于jQuery实现复选框的全选 全不选 反选功能
12-11
本代码是在众多的jQuery复选框功能代码中精选出来的，本人项目中使用的代码，这里分享给大家。 jQuery代码： 代码如下:  $(function(){  $(“#checkedAll”).click(function(){  $(‘[name=items]:checkbox’)...
jquery实现全选、不选、反选的两种方法
11-25
在取复选框checkbox的属性checked属性值时，发现一个问题，就是当用attr取值时，真的为”checked”,假的为”undefined”;当用prop取值时，真的为”true”,假的为”false”。经过网上参考一些资料，及...全选、不选、
jquery全选反选全不选案例
04-04
"jquery全选反选全不选案例" 是一个常见的交互功能，常见于表格或者列表中，允许用户一键选择或取消所有选项。这个功能在数据筛选、批量操作等场景下非常实用。 实现这一功能的关键在于理解 jQuery 中的选择器和...
利用jQuery轻松实现全选/全不选,全选,全不选,反选按钮功能
Llaqwer的博客
09-06 1291
上篇写到利用js实现该功能,这次利用jQuery可以更简单的实现该功能 在项目里需要添加jquery.js如图: 网页中body代码 &lt;body&gt; 您的爱好很广泛!!! &lt;br&gt; &lt;input type="checkbox" name="chekcItems" value="全选/全不选" id="select"/&g
jQuery实现全选、反选和不选功能的方法详解
01-19
本文实例讲述了jQuery实现全选、反选和不选功能的方法。分享给大家供大家参考，具体如下： 适用于网页多选后需要进行批量操作的场景（如批量删除等）。如有问题希望大家可以指正。谢谢~~ HTML 我们的页面上有一个歌曲列表，列出多行歌曲名称，并匹配复选框供用户选择，并且在列表下方有一排操作按钮 <ul id=list> <li><label><input type=checkbox value=1> 1.时间都去哪儿了</label></li> <li><label><input type=checkbox value=2> 2.海阔天空</label></li>
jQuery实现全选、全不选、反选
陈嘉欣的技术编程博客
06-28 290
HTML代码&lt;body&gt; &lt;table style="width: 100%;"&gt; &lt;tr&gt; &lt;td&gt; &lt;input id="cbx1" type="checkbox" name="all" /&gt;归去来&
通过jquery实现全选、全不选、反选功能
fq_fly的博客
11-29 335
通过jquery实现全选功能 点击全选/全不选，若子选项都未选择，则子选项全部选择；若子选项都选择，则子选项全部取消选择； 在全部选择情况下，若点击子选项取消选择，则全选/全不选取消选择； 在部分选择和另一部分未选择情况下，点击反选，则前一部分取消选择，后一部分选择 <!DOCTYPE html> <html> <head> <meta cha...
使用Jquery实现全选、全不选、反选功能
qqyang_的博客
07-16 830
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <titl.
jquery全选/全不选/反选的实现代码(适合入门)
toplover2的linux学习博客
04-07 127
jquery另一种全选、全不选、反选的方式(与原生js混合使用)。 [code="java"] $(document).ready(function(){ $("#selectAll").click(function(){ //这里也可以直接用this,原生js语句 if($(this)[0].checked){ $('[name=items]:checkbox')...
jQuery实现全选、全不选以及反选操作
m0_37601917的博客
12-12 1106
在写购物车案例时实现全选操作使用的是js的getAttribute（）setAttribute（）方法获取checked属性的值是undefined实现完成之后全选操作，如果在全选中的情况下改变其中一个的状态再点击全选，之前被取消的将不在被选中。之后使用js的DOM.checked属相的获得是true或false，操作很方便，很完美没有bug。 　　学了jquery后单独实现下全选、全不选、反选...
jQuery 实现全选、反选、全不选功能
qq_58154602的博客
10-30 404
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <titl.
jQuery实现的全选、全不选、反选
honey_th的专栏
03-23 414
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> jQuery实现的全选、全不选、反选 //使用jquery加载事件 $(document).ready(function (){    //设置全选  $("#all-yes").click(
jQuery实现checckbox的全选、全不选、反选
Fuzz
07-24 497
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"&g
jQuery实现全选、全不选和反选
最新发布
06-07
可以使用以下代码来实现jQuery的全选、全不选和反选功能： ```javascript // 全选 $("#checkAll").click(function(){ $("input[type='checkbox']").prop("checked", true); }); // 全不选 $("#uncheckAll").click...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值