zoukankan      html  css  js  c++  java
  • 常用的筛选组件

    <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)
    }
  • 相关阅读:
    SQL Server系统表sysobjects介绍
    tofixed方法 四舍五入
    (function($){})(jQuery);
    DOS批处理命令-字符串操作
    IF ERRORLEVEL 和 IF %ERRORLEVEL% 区别
    Gpupdate命令详解
    DOS批处理中%cd%和%~dp0的区别
    SetACL 使用方法详细参数中文解析
    Lazarus 1.6 增加了新的窗体编辑器——Sparta_DockedFormEditor.ipk
    Lazarus 1.44升级到1.6 UTF8处理发生变化了
  • 原文地址:https://www.cnblogs.com/phpfensi/p/7298489.html
Copyright © 2011-2022 走看看