zoukankan      html  css  js  c++  java
  • jQuery模糊匹配checkbox全选 value实现checkbox部分或全部全选

    本文章总结jQuery实现checkbox三种情况的全选功能

    第一种:等值全选,也称name的等值全选,通过checkbox的名称name实现。

    第二种:模糊全选,也称id模糊全选,通过checkbox的id或value值实现。

    第三种:值范围全选,也称value值范围全选,通过checkbox的value值实现,或者截取id数字后缀范围判断实现。

    等值全选

     

    在工作中经常会用到checkbox的全选功能,平时大家用得最多的全选和反选是第一种,一般都是基于全部名称相同的checkbox进行实现,这种全选比较简单。实现代码如下:

    $("input#allSer").click(function(){
    
        if(this.checked){   
    
        $("input[type='checkbox'][name='newselectedServers']").attr("checked",true);  
    
        }else{   
    
        $("input[type='checkbox'][name='newselectedServers']").attr("checked",false);
    
       }
    
    });
    

     以上代码实现的功能:当单击id="allSer”的按钮时,所有名name=“newselectedServers"的checkbox就被全选上,再次单击时则取消全选,功能比较简单,就不再详述

     

    模糊全选

     

    模糊全选可已实现特定的需求,如前缀或后缀包含特定字符,首先应了解jQuery模糊匹配的规则:

    [属性名称] 匹配包含给定属性的元素
    [att=value] 匹配包含给定属性的元素
    [att*=value] 模糊匹配
    [att!=value] 不能是这个值
    [att$=value] 结尾是这个值
    [att^=value] 开头是这个值
    [att1][att2][att3]... 匹配多个属性条件中的一个

    实现例子如下:

    $("input[type='checkbox'][name='newselectedServers'][id^='new']").attr("checked",true);//全选所有id前缀为new的checkbox
    
    $("input[type='checkbox'][name='newselectedServers'][id$='servers']").attr("checked",true);//全选所有id后缀为servers的checkbox
    
    $("input[type='checkbox'][name='newselectedServers'][value^='20']").attr("checked",true);//全选所有value前缀为20的checkbox
    

     反选类同代码就不贴出来。

     

    还有一种多值模糊全选,实现代码如下:

    $("input[type='checkbox'][name='newselectedServers'][value^=20],[value^=21],[value^=50],[value^=51],[value^=70],[value^=71]").attr("checked",true);
    

     以上代码实现所有以20,21,50,51,70,71开头的checkbox的全选。

     

    值范围全选

     

    让我头痛的是第三种值访问全选,前两种都实现不了我想要的功能。

    功能要求:实现服务器列表部分全选,服务器列表的value含有的值是数字,特定功能的服务器的值在某一指定的范围,勾选特定功能的全选时就要把指定范围的服务器列表全部选上。

    以后需求看起来简单,实现起来也简单,难就难找资料的过程和在想的过程,在网上找了很多关系jQuery实现checkbox全选资料和微博,都没有一篇符合我的要求,最后只能通过自己各种想法,各种调试,最终还是实现的自己想要的功能。想法的关键点在于平时用的全选大部分都是基于checkbox的name和id,很少人使用value实现全选,想到这就成功了一半,再通过遍历比较值的大小就可以实现值范围的全选,大家都迫不及待想知道实现的代码了吧。

     

    //实现九游服务器的全反选,九游服务器的value范围在2000-5000之间
    $("input#sjspecialSer").click(function(){
         if(this.checked){   
            //遍历value,转换成数字对比
             $("input[type='checkbox'][name='newselectedServers']").each(function(index,element){
                 var serverId = Number(element.value);
                 if(serverId >= 2000&& serverId < 5000){
                     $(element).attr("checked",true);
                 }
             });
         }else{   
             $("input[type='checkbox'][name='newselectedServers']").each(function(index,element){
                 var serverId = Number(element.value);
                 if(serverId >= 2000&& serverId < 5000){
                     $(element).attr("checked",false);
                 }
             });
         }
    });
    
    //实现乐玩服务器的全反选,乐玩服务器的value在5000-1000之间
    $("input#lwspecialSer").click(function(){if(this.checked){ 
            //遍历value,转换成数字对比
             $("input[type='checkbox'][name='newselectedServers']").each(function(index,element){
                 var serverId = Number(element.value);
                 if(serverId >= 5000&& serverId < 10000){
                     $(element).attr("checked",true);
                 }
             });
         }else{   
             $("input[type='checkbox'][name='newselectedServers']").each(function(index,element){
                 var serverId = Number(element.value);
                 if(serverId >= 5000&& serverId < 10000){
                     $(element).attr("checked",false);
                 }
             });
         }
    });
    
  • 相关阅读:
    快速幂模板
    部分有关素数的题
    POJ 3624 Charm Bracelet (01背包)
    51Nod 1085 背包问题 (01背包)
    POJ 1789 Truck History (Kruskal 最小生成树)
    HDU 1996 汉诺塔VI
    HDU 2511 汉诺塔X
    HDU 2175 汉诺塔IX (递推)
    HDU 2077 汉诺塔IV (递推)
    HDU 2064 汉诺塔III (递推)
  • 原文地址:https://www.cnblogs.com/PatrickLiu/p/13099013.html
Copyright © 2011-2022 走看看