简单使用JQ代码 实现全选 反选 全不选 批删

最新推荐文章于 2022-04-07 20:22:27 发布
最新推荐文章于 2022-04-07 20:22:27 发布
阅读量764 收藏 1
点赞数
文章标签： jq
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhexienianlai/article/details/53995741
版权 
 
 

  
  <html>
 
 

 
 

  
  <table class="table">
    <tr>
        <td>选择</td>
        <td>ID</td>
        <td>NAME</td>
        <td>SEX</td>
        <td>AGE</td>
        <td>TEL</td>
        <td>操作</td>
        <td>查看</td>
    </tr>


    <tbody class="tbo1">
    <?php foreach($data as $key=>$val):?>
    <tr>
        <td><input type="checkbox" value="<?=$val['s_id']?>" class="c_box"></td>
        <td><?=$val['s_id']?></td>
        <td><?=$val['s_name']?></td>
        <td><?=$val['s_sex']?></td>
        <td><?=$val['s_age']?></td>
        <td><?=$val['s_tel']?></td>
        <td><a href="">操作</a></td>
        <td><a href="?r=students/select&s_id=<?=$val['s_id']?>">查看</a></td>
    </tr>
    <?php endforeach;?>
    </tbody>
</table>
<button class="all">全选</button>
<button class="nall">反选</button>
<button class="no_all">取消</button>
<button class="delete">删除</button>

 
 

 
 

  
  

 
 

 
 

  
  </html>
 
 

 
 

  
  

 
 

 
 

  
  

 
 

 
 

  
  JQ代码``````````````````````````````````````````````
 
 

 
 

  
  

 
 

 
 

  
  //
  
  反选

  
  $(
  
  document).
  
  delegate(
  
  '.doAll',
  
  'click',
  
  function () {
    
  
  $(
  
  '.cbox').
  
  each(
  
  function () {
        
  
  $(this).prop('checked',!$(this).prop('checked'));
    })
})

 
 

 
 

  
  

 
 

 
 

  
  //全选
 
 

 
 

  
  $(
  
  document).
  
  delegate(
  
  '.onAll',
  
  'click',
  
  function () {
    
  
  $(
  
  '.cbox').
  
  each(
  
  function () {
        
  
  $(
  
  this).
  
  prop(
  
  'checked',
  
  true);
    })
 
 

 
 

  
  })
 
 

 
 

  
  

 
 

 
 

  
  //
  
  全不选

  
  $(
  
  document).
  
  delegate(
  
  '.noAll',
  
  'click',
  
  function () {
    
  
  $(
  
  '.cbox').
  
  each(
  
  function () {
        
  
  $(
  
  this).
  
  prop(
  
  'checked',
  
  false);
    })
})


  
  //
  
  批删

  
  $(
  
  document).
  
  delegate(
  
  '.delAll',
  
  'click',
  
  function () {
    
  
  $(
  
  '.cbox').
  
  each(
  
  function () {
        
  
  if (
  
  $(
  
  this).
  
  prop(
  
  'checked')){
            
  
  _ids = 
  
  $(
  
  this).
  
  val();
            
  
  del(
  
  _ids,
  
  $(
  
  this))
        }
    })

})

  
  function 
  
  del(ids,obj) {
    
  
  $.
  
  post(
  
  '?r=students/getdel',{
  
  ids:ids},
  
  function (success) {
        
  
  if (success == 
  
  1){
            obj.
  
  parents(
  
  'tr').
  
  remove();
        }
  
  else {
            
  
  alert(
  
  '
  
  删除失败
  
  ')
        }
    })
 
 

 
 

  
  }
 
 

 
 

  
  

 
 

 
 

  
  //
  
  单删

  
  $(
  
  '.oneDel').
  
  click(
  
  function () {
        
  
  _id = 
  
  $(
  
  this).
  
  attr(
  
  'id')
        
  
  del(
  
  _id,
  
  $(
  
  this))
})
永远学习中
关注
使用jQuery实现全选，全不选和反选的效果
u_u2020的博客
05-16 1155
使用jQuery实现全选，全不选和反选的效果 上一篇我们用的是JavaScript的方法实现这个效果，接下来让我们用jQ uery的方法来实现一下。 首先第一步像上一篇一样，我们来写一下它的布局，现在我用的是radio，他是一个单选框，如果给这几个input标签一个name属性且相同的话，他就只能选择一个，否则它可以选多个，在这里我们不需要name属性，我们现在不用button按钮而用input标签，其实他们的效果都一样，我们只需把input里的type属性改成button就可以了如下： .
JQuery实现列表中复选框全选反选功能封装(推荐)
10-21
总结来说，JQuery实现列表中复选框全选反选功能封装是一个很好的实践，它展示了如何利用JQuery操作DOM和事件监听的能力来实现高效和用户友好的界面交互。通过合理使用自定义属性和选择器，可以显著降低HTML结构和...
JQuery实现全选、全不选、反选功能
12-12
JQuery实现全选、全不选、反选功能 1、当点击'全选'按钮时，页面中所有的复选框都应该为选中状态， 1.1、当再次点击'全选'按钮时，所有的复选框应该是非选中状态。 1.2、当点击子复选框时，'全选'按钮应该是非选中状态。 2、当选中当前页面的所有子复选框时，'全选'按钮应该是'选中'状态。 3、点点击'全不选'按钮时，当前页面的所有复选框置为非选中状态。 4、当点击'反选'按钮时，当前页面选中状态的复选框置为未选中状态，未选中状态的复选框置为选中状态。
jq实现全选反选
m0_65878076的博客
04-07 231
之前发过js实现全选和反选，但是原生js码比较麻烦，所以我们来一个相对简单的jq做法，希望小伙伴们可以看懂 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <input type="checkbox" id="all" value="全选" />全选 &l.
jQuery代码实现全选反选功能
weixin_44810547的博客
03-21 892
jQuery代码实现全选反选功能 <title>全/全不选，反选</title> <script type="text/javascript" src="js/jquery-1.8.2.js"></script> <script type="text/javascript"> function qx() { if($(":checkbo...
js和jq实现全选反选
weixin_30588729的博客
09-17 99
其实在开发的过程中回经常遇到那些全选或者反选的情况，下面两篇文章，感觉真心的不错，我也亲身写过了呢，所以就不太过啰嗦有重写一遍了 转载：https://www.cnblogs.com/wszz/p/8036911.html（js） 转载：https://www.cnblogs.com/cythia/p/6663434.html（js和jq，我是用过里面的jq，很不错的一个文章） 转载于:htt...
使用JQuery实现全选全部选和反选
qq_32077521的博客
10-21 473
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /> <scrip...
基于jquery实现复选框全选，反选，全不选等功能
11-26
在本篇文章中，我们将探讨如何利用 jQuery 来实现复选框的全选、反选和全不选等功能。这些功能在各种用户界面中都非常常见，例如在批量操作列表项或进行多选项选择时。 首先，让我们回顾一下示例中的 HTML 结构，它...
jquery checkbox全选反选效果代码
12-04
知识点一：使用jQuery实现checkbox全选和反选功能 1. jQuery是一种快速、小巧、功能丰富的JavaScript库，它封装了JavaScript常用的功能代码，极大地简化了JavaScript的开发。 2. checkbox全选和反选是web开发中常见...
jquery一键控制checkbox全选、反选或全不选
11-27
在jQuery中，对复选框（checkbox）进行全选、反选或全不选的操作是常见的需求，特别是在处理用户交互时。在这个例子中，我们看到一个利用jQuery实现的简单示例，通过三个独立的事件处理器来实现这些功能。以下是详细...
demo46-jQuery全选，反选，取消选择.html
05-07
demo46-jQuery全选，反选，取消选择.html
Jquery之实现全选反选功能
阿毅
05-05 2734
开心一笑汤普森：“夫人，你刚去世的丈夫是我最亲密的朋友，希望你能送我一件他的遗物，让我永久保存以作纪念。” 艾丽斯：“仁慈的上帝啊，除了我本人外，我丈夫什么也没留下。”提出问题如何用Jquery实现全选反选功能解决问题<div id="checkAndInverCheck"> <p style="text-align:center; padding-top:15px"> 选择喜欢的兰花品种：</
JQUERY 常用方法大全
weixin_30340775的博客
09-26 599
Dom： Attribute： $("p").addClass(css中定义的样式类型); 给某个元素添加样式 $("img").attr({src:"test.jpg",alt:"test Image"}); 给某个元素添加属性/值，参数是map $("img").attr("src","test.jpg"); 给某个元素添加属性/值 $("img").attr("title", ...
jQuery实现全选与反选的功能 （附带jQuery jar包）
weixin_44657829的博客
05-10 283
jQuery实现全选与反选的功能（js实现：https://blog.csdn.net/weixin_44657829/article/details/105740105） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-3.5.0.js"
laravel 全选反选
猪年大吉的博客
01-28 1055
给input设置一个class &lt;input type="checkbox" class="all"&gt; @foreach($info as $v) &lt;tr align="center"&gt; &lt;td&gt; &lt;input type="checkbox" value="{{$v-&gt;id}}"
jq全选反选批量删除
biubiubiubiubiu
03-26 1291
">     js/jquery-1.7.2.js">     js/pagination/js/jquery.min.js"> js/pagination/js/jquery.pagination.js">     用户列表      function CheckAll(val) {  $("input[name='chkJob']").each(function() { 
补充上一篇：jQuery实现全选，反选，取消操作
lf1949的博客
03-27 1283
这篇文章是对上一篇文章的修改 上一篇文章：点击跳转至上一篇文章 在上一篇文章中我提到过没有理解取消操作的作用 以下是我的修改： 代码展示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--引入jquery库--> <script src="js/jquery-3.6.0.mi
jquery实现全选反选
weixin_46047399的博客
06-01 898
1、全选 $("#btn1").click(function(){ $("input[name='checkbox']").attr("checked","true"); }) 2、取消全选（全不选） $("#btn2").click(function(){ $("input[name='checkbox']").removeAttr("checked"); }) 3、选中所有奇数 $("#btn3").click(function(){ $("input[name='checkbox']:..
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值