使用jQuery实现全选，全不选和反选的效果

最新推荐文章于 2023-05-24 12:38:44 发布
最新推荐文章于 2023-05-24 12:38:44 发布
阅读量1.1k 收藏 3
点赞数 3
文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u_u2020/article/details/116900566
版权

使用jQuery实现全选，全不选和反选的效果

 

上一篇我们用的是JavaScript的方法实现这个效果，接下来让我们用jQ

uery的方法来实现一下。

首先第一步像上一篇一样，我们来写一下它的布局，现在我用的是radio，他是一个单选框，如果给这几个input标签一个name属性且相同的话，他就只能选择一个，否则它可以选多个，在这里我们不需要name属性，我们现在不用button按钮而用input标签，其实他们的效果都一样，我们只需把input里的type属性改成button就可以了如下：

<input type="button" id="btn1" name="name" value=" 全选" />

<input type="button" id

最低0.47元/天 解锁文章
u_u2020
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery实现全选、反选、取消全部等操作(复选框checkbox)
m0_61549984的博客
04-17 1471
this.checked){//一旦有一个未选中，则全选按钮 设置不选中。//将全选框的checked属性设置为false，也就是不选中全选框。//当前控件是选中的则设置为不选中，当前控件未选中的则设置为选中。$(this).parent().parent()是祖父节点tr。//选择class="userid"的控件，设置全部都不选中。//选择class="userid"的控件，让全部都选中。//选择class="userid"的控件，并执行循环。//选择class="userid"的控件。
使用Jquery实现全选、全不选、反选功能
qqyang_的博客
07-16 827
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <titl.
08-jQuery-实现全选和全不选操作
记录java学习日常~
05-24 722
如果有一个未被选中，则不是全部选中，将全选的 checkbox 取消选中；否则全部选中，将全选的 checkbox 选中。这里使用了 prop() 方法来设置 checkbox 的 checked 属性，如果全选的 checkbox 被选中了，则将所有的水果 checkbox 都选中，否则都不选中。然后，我们还可以添加一个点击事件来监测所有的水果 checkbox 是否全部被选中，如果是，则自动将全选的 checkbox 选中，否则不选中。
jquery实现全选反选操作
Dearan33的博客
12-09 525
jquery实现多选复选操作
jQuery 全选与不全选 Jquery each
weixin_30642029的博客
06-15 131
关于复选框全选 反选等问题的知识积累 1、项目中用到的js片段 <script type="text/javascript"> jQuery(function () { 　　　　　　 //当全选点击的时候 jQuery("thead tr th:first input").click(function () { ...
jquery实现全选、不选、反选的两种方法
11-25
在取复选框checkbox的属性checked属性值时，发现一个问题，就是当用attr取值时，真的为”checked”,假的为”undefined”;当用prop取值时，真的为”true”,假的为”false”。经过网上参考一些资料，及...全选、不选、
jquery 实现全选，全不选，反选，获取选中的值
12-19
综上所述，使用 jQuery 实现全选、全不选、反选以及获取选中值的功能是相当直观和简单的。通过绑定事件处理器，我们可以轻松地响应用户的交互，动态地更新页面状态。结合 HTML 结构和适当的 CSS 样式，可以创建出...
jquery 全选、全不选、反选效果的实现代码【推荐】
10-22
在创建用户界面时，有时我们需要实现全选、全不选和反选的功能，特别是在处理多选列表或表格时。本文将详细介绍如何使用jQuery实现这些效果。 首先，确保在HTML文件中正确引入jQuery库。在这个例子中，我们引入了...
基于jQuery实现复选框的全选 全不选 反选功能
12-11
本代码是在众多的jQuery复选框功能代码中精选出来的，本人项目中使用的代码，这里分享给大家。 jQuery代码： 代码如下:  $(function(){  $(“#checkedAll”).click(function(){  $(‘[name=items]:checkbox’)...
JQuery实现全选、全不选、反选功能
12-12
JQuery实现全选、全不选、反选功能 1、当点击'全选'按钮时，页面中所有的复选框都应该为选中状态， 1.1、当再次点击'全选'按钮时，所有的复选框应该是非选中状态。 1.2、当点击子复选框时，'全选'按钮应该是非选中状态。 2、当选中当前页面的所有子复选框时，'全选'按钮应该是'选中'状态。 3、点点击'全不选'按钮时，当前页面的所有复选框置为非选中状态。 4、当点击'反选'按钮时，当前页面选中状态的复选框置为未选中状态，未选中状态的复选框置为选中状态。
jquery实现全选和全不选功能效果的实现代码【推荐】
10-22
下面小编就为大家带来一篇jquery实现全选和全不选功能效果的实现代码【推荐】。小编觉得挺不错的，现在分享给大家，也给大家做个参考
全选、反选、获取选中值
weixin_33675507的博客
06-19 312
<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 实现全选、反选、全不选功能
qq_58154602的博客
10-30 400
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <titl.
利用JavaScript和jQuery实现全选全不选和反选功能
bug生成师
11-24 1053
代码如下 用JavaScript实现相关功能。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .blue{ background-color: d...
使用JS及jquery两种方法完成复选框的全选，全不选，反选功能
kitty479655237的博客
07-17 843
一、JS实现 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;script src="jquery-3.3.1.min.js&qu
jquery 实现全选全不选效果及误区
Lear的博客
11-05 170
$('#allCheck').on('click',function(){ if($(this).is(':checked')){ $(this).parents('thead').siblings('tbody').find('input[type="checkbox"]').prop('checked',true); ...
关于jquery实现table列表的全选框事件的总结
t1heluosh1的博客
10-23 1163
距离上一次写博客已经过去两个多月，因为工作的变动和身体的原因，使得原本计划的关于socket总结的下篇博客不了了之。     编程的路不好走，我希望能通过记录博客的方式，记录或总结我曾经遇到的问题。总结的有浅薄之处，但我相信，现在的记录能巩固记忆，以后再次翻阅也定能有另一番收获。     这篇博客的主题是list列表的全选实现，以前的框架封装的比较多，很多应用都没亲自实现或仔细理解过。现在入职
jq中最简单全选与全不选
qq_35641923的博客
02-26 3873
id换成对应按钮的id，class为对应input的class $(document).on('click','#id',function(){ if($(this).is(":checked")){ $('.class').prop('checked',true); }else{ $('.class').prop('checked',false...
jQuery实现全选、全不选和反选
最新发布
06-07
可以使用以下代码来实现jQuery的全选、全不选和反选功能： ```javascript // 全选 $("#checkAll").click(function(){ $("input[type='checkbox']").prop("checked", true); }); // 全不选 $("#uncheckAll").click(function(){ $("input[type='checkbox']").prop("checked", false); }); // 反选 $("#reverseCheck").click(function(){ $("input[type='checkbox']").each(function(){ $(this).prop("checked", !$(this).prop("checked")); }); }); ``` 其中，`#checkAll`、`#uncheckAll`、`#reverseCheck`是三个按钮的id，可以根据具体情况进行修改。`$("input[type='checkbox']")`则是选中所有的复选框。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值