jQuery全选案例

最新推荐文章于 2021-12-28 23:36:10 发布
最新推荐文章于 2021-12-28 23:36:10 发布
阅读量592 收藏
点赞数 1
分类专栏： jQuery 文章标签： jQuery checkbox
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nsnydnz/article/details/119490379
版权

全选+反选

可根据控制台结合查看结果
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过滤选择器</title>
    <script src="jquery-3.2.1.min.js"></script>
</head>

<body>

    <table border="1">
        <tr>
            <td><input type="checkbox" value="1"></td>
            <td>剑圣</td>
            <td>450</td>
        </tr>
        <tr>
            <td><input type="checkbox" value="2"></td>
            <td>剑豪</td>
            <td>6300</td>
        </tr>
        <tr>
            <td><input type="checkbox" value="3"></td>
            <td>剑姬</td>
            <td>6300</td>
        </tr>
        <tr>
            <td><input type="checkbox" value="4"></td>
            <td>剑魔</td>
            <td>6300</td>
        </tr>
    </table>
 
    <input type="button" value="点击选择使用第一个" id="firstBtn">
    <input type="button" value="点击选择使用最后一个" id="lastBtn">
    <input type="button" value="全选适用于批量删除" id="allBtn">
    <input type="button" value="查看已选中的" id="checkBtn">
    <input type="button" value="查看未选中的" id="nocheckBtn">
    <input type="button" value="反选" id="overBtn">
    <input type="button" value="反选的升级版" id="overBtn1">

<script>

        $(function() {
            //jQuery 使用过滤选择器 达到 奇偶数变色
            $("table tr:even").css('background-color','pink');
            $("table tr:odd").css('background-color','blue');
            // 
            
            // 拿去第一个
            $("#firstBtn").click(function() {
                var first = $("table tr:first").html();
                console.log(first);  
            })

             // 拿取最后一个
             $("#lastBtn").click(function() {
                var last = $("table tr:last").text();
                console.log(last);  
            })
            // 全选 ---- 用来批量删除
            $("#allBtn").click(function() { 
                // 思路找出所有 checkbox的 td 进行遍历 选中即可 
                $.each($("table tr td>input"), function(index, value) {
                  //  console.log(index);   
                  //  console.log(value);
                    console.log($(this).val()); // 遍历取值
                    $(this).prop('checked',true); // 全选
                })

            }) 
            // 点击查看已经选中的
            $("#checkBtn").click(function() { 
                // 使用过滤选择器 可以选中 :
                $("table tr td>input:checked")
                $.each($("table tr td>input:checked"), function(index, value) {
                    
                    console.log($(this).val()); // 遍历取值
                    
                })
            
            }) 
            // 点击查看未选中的
            $("#nocheckBtn").click(function() { 
                console.log($("table tr td>input:not(:checked)"))
            })
            // 反选
            $("#overBtn").click(function() { 
                $.each($("table tr td>input"), function(index, value) {
                    var istrue =$(this).prop("checked");
                    //console.log(value.checked = !value.checked); // 遍历取值
                   if(istrue){
                        $(this).prop("checked",false);
                   } else{
                    $(this).prop("checked",true);
                   }
                })   
            })     
            // 升级版的全/反选
            $("#overBtn1").click(function() { 
                $.each($("table tr td>input"), function(index, value){
                $(this).prop("checked",!$(this).prop("checked"))
                })
            })
    })  
</script>

</body>
</html>
来干了这碗代码
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
四大常见的jQuery选择器+案例
ovocc的博客
03-17 6585
常见的jQuery选择器前言四大选择器一.jQuery基础选择器1.ID选择器2.全选选择器3.类选择器4.标签选择器5.并集选择器6.交集选择器二、使用步骤1.引入库2.读入数据总结 前言 jQuery唯一个javascrip库,里面封装了JavaScript常用的的功能代码，优化了DOM操作，事件处理，动画设计和Ajax交互。但因为jQuery对象有自己的封装，dom对象不能使用，所以需要选择器将对象选取出来使用 四大选择器 一.jQuery基础选择器 1.ID选择器 ID选择器可以选择指定id的
jQuery 属性操作——案例：购物车案例模块
qq_39368007的博客
11-29 1380
案例：购物车案例模块-全选
前端经典JQuery案例1--按钮全选
zyzyzouyou的博客
10-08 1005
一.准备 这个案例用的是JQuery技术.所以需要先导入JQuery文件. 在准备一个下图的按钮样式 二.分析 1.功能分析 1).点击全选按钮,下面的按钮都会变成选中状态,再次点击全选按钮,下面三个变成未选中状态 2).点击下面的按钮会变成选中状态,当三个按钮全部选中时,全选按钮会变成选中状态 3).当全选被选中时,取消任意一个按钮全选都会取消选中. 2.绑定事件 对于复选框的点击可以绑定点击事件也可以绑定change事件.change事件就是当状态发生改变时触发的事件...
jquery全选反选全不选案例
04-04
jquery实现全选反选全不选案例，在入场网页开发中实现。
jquery实现全选全不选的案例
岁月如歌去，十年弹指间
11-27 883
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
jQuery选择器案例
端木奇影のWEB前端
05-05 464
jQuery运用选择器简单案例（练习来自《锋利的jQuery》一书）：
jQuery单选、全选
m0_57202083的博客
08-27 383
$(":checkbox[name='roy']" 指的是读取所有名字为roy的checkbox多选框 .attr("checked",true) 获取到的元素标签添加一个名字为checked的属性，值为true，就是选中的意思； .attr("标签属性名","属性值") <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> &l..
解决JQuery全选/反选第二次失效的问题
10-19
在JavaScript和jQuery开发中，全选/反选功能是一个常见的需求，特别是在表格或者多选列表中。当用户点击一个主复选框（如“全选”按钮）时，所有子复选框应相应地被选中或取消选中。然而，在实际应用中，可能会遇到...
jQuery实现类似淘宝购物车全选状态示例
12-12
代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ... <head> <... charset=utf-8″ /> <...script type=”text/javascript”
前端：jQuery,购物车案例
03-28
实现步骤： (1) 使用实现数据渲染 (2)每个+按钮实现数字加1总价更新 (3)每个-按钮实现数字减1总价更新 (4)每个删除按钮实现整行商品删除 ...(7)每一个主体商品复选框被选中的时候判断全选按钮是否需要被选中
Jquery 全选反选实例代码
11-25
本文给大家分享一段基于jQuery的全选、反选和不选功能的代码，适用于网页多选后需要进行批量操作的场景（如批量删除等）。文章结合实例，代码简洁，基本覆盖选项选择操作的方方面面，希望可以帮到有需要的WEB爱好者。 //全选 全不选 $('#checkAll').click(function () { //判断是否被选中 var bischecked = $('#checkAll').is(':checked'); var fruit = $('input[name="check"]'); bischecked ? fruit.attr('checked', true) : f
JQuery--全选与反选小案例
欣欣酱博客
12-28 418
这个全选反选案例相信大家并不陌生了吧，在我们结算购物车时，点击全选按钮就会选择到所有商品，再点击取消其中之一商品，全选按钮就会自动取消。如果购物车中已经选择的物品个数等于所有物品个数，则全选按钮自动select。 下面我们来实施这个小案例。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible"
jq全选框全选实例
qq_38096598的博客
09-24 236
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jquery全选实例</title> <style> table th,table td { min-width: 50px; text-align: cent...
用jquery实现一个全选和反选的小案例
Endless love
07-24 425
用jquery实现一个全选和反选的小案例 其实知识学得越多，你就会发现做的东西越来越容易一些 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&am
使用jQuery写全选和反选案例
qq_44795340的博客
04-10 240
使用js和jQuery写一个全选的案例 效果图： html代码： <input type="button" value="全选"> <input type="button" value="全不选"> <input type="button" value="反选"> <br /> <input type="checkbox" name="s"...
jquery实现购物车案例模块全选
weixin_45147894的博客
10-22 2627
文章目录 一、jQuery属性操作: 1. 元素固有属性prop(): 2. 元素自定义属性 attr() 3. 数据缓存 data(): 4. 演示代码: 二、jQuery 文本属性值: 1. jQuery内容文本值 1.1 语法: 1.2 演示代码: 三、jQuery元素操作: 1. 遍历元素 2. 语法: 2.1 语法1: 2.2 语法2: 2.3 演示代码: 2. 创建、添加、删除: 2.
jquery 全选样例
weixin_30446197的博客
08-20 76
代码： $(function(){ $("#checkAllOld").click(function() { $("input[id^='box_old_']").prop("checked", this.checked); }); }); 循环显示出的数据： if(obj.status=="1"){ h +=...
jquery实现表格全选反选案例
qq_15980201的博客
11-23 1178
.wrap{margin: 20px;width: 300px;} table{border: 1px solid silver;border-collapse: collapse;border-spacing: 0;} td,th{padding: 10px;border: 1px solid #D0D0D0;color: #404060;font-size: 14px;} th{back
使用jquery写一个全选的例子
12-19 413
使用jquery写一个全选的例子？  //全选与取消全选  function selectAll(flag) {   for(var i=0; i    $("#fonds input").get(i).checked=flag;   }  }  //判断复选框已经被勾选了多少个？  function checkFonds() {   var count=0;   for(va
jquery全选删除
最新发布
11-23
以下是一个基于jQuery的全选删除的例子： HTML代码： ```html 全选 选项1 选项2 选项3 删除 ``` jQuery代码： ```javascript // 全选和全不选的操作 $("#all").change(function(){ // 得到all的状态,将其设置给...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值