全选 单选 反选

一、编写全选 单选和反选框,关于css样式个根据自身需求自行编写

<input type="checkbox">全选
<input type="checkbox">反选
<ul>
      <input type="checkbox">单选
      <input type="checkbox">单选
     <input type="checkbox">单选
</ul>

二、功能实现部分 引用jquery-1.11.0.js进行代码编写

<script>
$(function(){
            // 全选功能
            var num = 0;
            $("input").eq(0).click(function(){
                num++;
                if(num % 2 == 1){
                    $("ul").children().prop("checked",true);
                }else{
                    $("ul").children().prop("checked",false);
                }                       
            })
            //单选中存在一个不为选中状态  全选则同样不为选中状态     
            $("ul").children().click(function(){
                var count = 0
                $("ul").children().map(function(){
                    if($(this).prop("checked")){
                        count++;
                    }
                })
                if(count ==  $("ul").children().length){
                    $("input").eq(0).prop("checked",true)
                }else{
                    $("input").eq(0).prop("checked",false)
                }
            })

            // 反选
            $("input").eq(1).click(function(){
                $("ul").children().map(function(){
                    if($(this).prop("checked") == true){
                        $(this).prop("checked",false)
                    }else{
                        $(this).prop("checked",true)
                    }
                })
            })
        })
</script>