jQuery实现的全选、反选和不选功能

简单常用的功能 之 checkbox操作

 

 

　　　　　　　　　　　　         效果图

演示地址:(http://fy.035k.com/project/checkbox)

 

html代码代码演示

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

 

javascript代码演示

// 绑定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)
    }