常用的筛选组件

<div class="checkbox-box">
    <div class="checkbox-list">
        <p><input type="checkbox" id="ball1" value="篮球"><label for="ball1">篮球</label></p>
        <p><input type="checkbox" id="ball2" value="足球"><label for="ball2">足球</label></p>
        <p><input type="checkbox" id="ball3" value="棒球"><label for="ball3">棒球</label></p>
        <p><input type="checkbox" id="ball4" value="弹力球"><label for="ball4">弹力球</label></p>
        <p><input type="checkbox" id="ball5" value="网球球"><label for="ball5">网球球</label></p>
        <p><input type="checkbox" id="ball6" value="乒乓球"><label for="ball6">乒乓球</label></p>
        <p><input type="checkbox" id="ball7" value="羽毛球"><label for="ball7">羽毛</label></p>
    </div>

    <div class="btnAll">
        <button class="allSelect">全选</button>
        <button class="notAllSelect">全不选</button>
        <button class="reverseSelect">反选</button>
        <button class="selectVal">获取选中的值</button>
    </div>
</div>
.btnAll button {
    display:inline-block;
    padding:6px 12px;
    font-size:14px;
    font-weight:400;
    line-height:1.42857143;
    text-align:center;
    cursor:pointer;
    border:1px solid transparent;
    border-radius:4px;
    -webkit-appearance:button;
    cursor:pointer;
    color:#fff;
    background-color:#5bc0de;
    border-color:#46b8da;
}
// 绑定click事件
$(document).delegate(‘.allSelect‘, ‘click‘, allSelect)
    .delegate(‘.notAllSelect‘, ‘click‘, notAllSelect)
    .delegate(‘.reverseSelect‘, ‘click‘, reverseSelect)
    .delegate(‘.selectVal‘, ‘click‘, selectVal);
// 全选
function allSelect() {
    $(".checkbox-list input").prop(‘checked‘, true);
}
// 全不选
function notAllSelect() {
    $(".checkbox-list input").prop(‘checked‘, false);
}
// 反选
function reverseSelect() {
    $(".checkbox-list input").each(function() {
        $(this).prop(‘checked‘, !$(this).prop(‘checked‘));
    })
}
// 获取选中的值
function selectVal() {
    var valArr = ‘‘;
    $(".checkbox-list input").each(function() {
        if ($(this).prop(‘checked‘) == true) {
            valArr += $(this).val() + ‘,‘;
        };
    })
    alert(valArr)
}
时间: 2024-10-15 09:51:59

常用的筛选组件的相关文章

10分钟教你如何选择筛选组件

生活需要筛选,App页面也一样.本文通过案例分析,从筛选组件的样式.使用场景等方面来解析筛选组件在手机端场景的设计. 筛选组件概述 筛选组件的作用是帮助人们在面对大量信息时,通过更高效的筛选方式提升决策效率.广义的筛选组件还包括搜索栏及Tab栏,本文暂不分析. 组件包括筛选按钮与筛选器,筛选器包含类别及各类别下的筛选项.使用频次高低.筛选条件的数量都是决定筛选组件样式的因素. 01 位于 Tab 栏的筛选组件 组件样式 筛选按钮位置:一般位于Tab栏最右侧视觉薄弱区域. 筛选器形式:点击按钮,筛

DRF框架(八)——drf-jwt手动签发与校验、过滤组件、筛选组件、排序组件、分页组件

自定义drf-jwt手动签发和校验 签发token源码入口 前提:给一个局部禁用了所有 认证与权限 的视图类发送用户信息得到token,其实就是登录接口,不然进不了登录页面 获取提交的username和password 1)rest_framework_jwt.views.ObtainJSONWebToken 的 父类 JSONWebTokenAPIView 的 post 方法 接受有username.password的post请求校验数据,并且签发token 2)post方法将请求数据交给 r

签发token、校验token、多方式登录签发token的实现、自定义认证反爬规则的认证类、admin使用自定义User表:新增用户密码密文、群查接口各种筛选组件数据准备、drf搜索过滤组件、drf排序过滤组件、drf基础分页组件

签发token 源码入口 # 前提:给一个局部禁用了所有 认证与权限 的视图类发送用户信息得到token,其实就是登录接口 # 1)rest_framework_jwt.views.ObtainJSONWebToken 的 父类 JSONWebTokenAPIView 的 post 方法 # 接收有username.password的post请求 # 2)post方法将请求得到的数据交给 rest_framework_jwt.serializer.JSONWebTokenSerializer 处

PAI文本分析实验:常用文本分析组件及案例实战

上一篇介绍了PAI以及机器学习相关的一点知识,没有深入算法原理,只是从使用角度出发熟悉了操作流程,后面随着学习的深入,我也会对算法原理做一个详细的阐述.这次我们还是继续实战,认识机器学习在文本分析领域是如何工作的.先贴出官方的教程:机器学习PAI眼中的<人民的名义>. 准备开始 还是在阿里PAI环境下,我们从实验模板:人民的名义分析进入,然后点击去PAI平台创建,这样就在机器学习页面创建好了实验.接下里设置各个组件的参数,我们先看下模型图: 你会发现模板创建的结果和教程的模型图不一样.这里我们

常用的Http组件

日常生活中,我们接触最多的Http组件就是浏览器了!但是,还有其他也很重要的组件,下面容我慢慢盘点: 1.代理服务器 代理服务器就是帮助我们发送请求报文,接受响应报文的服务器.对web服务器而言,代理服务器就是客户端,其实真正的客户端在代理的背后. 代理在web安全,性能优化以及应用集成三个方面都很有作用,比如: 禁止员工访问某某资源,阻止外部病毒木马的侵入. 2.缓存服务器 缓存服务器就是将常用的资源给存放到本地缓存服务器,客户端想要资源时,直接去缓存服务器获取,而不用大老远找web服务器要资

IOS比较常用的第三方组件及应用源代码(持续更新中)

把平时看到或项目用到的一些插件进行整理,文章后面分享一些不错的实例,若你有其它的插件欢迎分享,不断的进行更新~ 一:第三方插件 1:基于响应式编程思想的oc 地址:https://github.com/ReactiveCocoa/ReactiveCocoa 2:hud提示框 地址:https://github.com/jdg/MBPRogressHUD 3:xml/HTML解析 地址:https://github.com/topfunky/hpple 4:有文字输入时,能根据键盘是否弹出来调整自

saltstack常用模块及组件备忘

Saltstack分为主控端和被控端.主控端的salt服务启动:systemctl start salt-master,被控端的服务启动:systemctl start salt-minion1.Saltstack的防火墙配置主控端防火墙允许TCP4505和4506端口,被控端不需要配置.原理是被控端直接与主控端的zeromq建立长链接,接受广播到的任务信息并执行. iptables -I INPUT -m state --state new -m tcp -p tcp --dport 4506

java中常用的swing组件 (2013-10-27-163 写的日志迁移

五种布局: 流式布局(FlowLayout)边界布局(borderLayout)网格布局(GridLayout) 常用的三种 卡片布局(CardLayout)网格包布局(GridBagLayout)不常用的两种 JFrame 窗体(默认的borderLayout布局) JPanel 面板 (默认的FlowLayout布局) JButton   按钮 JRadioButton 单选框(一定要把单选放在ButtonGroup当中形成互斥) JCheckBox 复选框 JLabel 标签 JTextF

.net开发中常用的第三方组件

RSS.NET.dll RSS.NET是一款操作RSS feeds的开源.NET类库.它为解析和编写RSS feeds提供了一个可重用的对象模型.它完全兼容RSS 0.90, 0.91, 0.92, 和 2.0.1等版本. AspNetPager.dll 我使用过的分页控件中,最好用的一个. 官方地址:http://www.webdiyer.com/AspNetPager/default.aspx Aspose.Words.dll Aspose.Words是一个无图形用户界面的.NETWord文