常用的筛选组件

Posted 2020-10-01 壁虎漫步.

<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)
}