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);
                 }
             });
         }
    });
    
  • 相关阅读:
    Thinking in Java 第十六章学习笔记----数组
    Thinking in Java第十五章学习笔记----泛型
    Thinking in Java第十四章学习笔记----类型信息
    Thinking in Java第十三章学习笔记----字符串
    Kaggle竞赛--Titanic:Machine Learning from Disaster
    sklearn 常用算法参数设置与选择
    Pandas 入门知识
    机器学习常用数据集
    感知机PLA
    决策树CART--原理与实现
  • 原文地址:https://www.cnblogs.com/PatrickLiu/p/13099013.html
Copyright © 2011-2022 走看看