html全选反选取消全选

1、书写复选框

  <td><input type="checkbox" name="ck[]"  value="{$arr.id}" ></td>

2、书写按钮

 <button type="button" class="btn btn-default"  id="allcheck">全选</button>
 <button type="button" class="btn btn-default" id="allnot">取消全选</button>
 <button type="button" class="btn btn-default" id="fan">反选</button>

3、引入jQ

 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>

4、jQ方法

<script>
 //全选
    $("#allcheck").click(function () {
       var ck=$("input[name='ck[]']");
       for(var i=0;i<ck.length;i++){
           $(ck[i]).prop('checked',true);
       }
    })
    //取消全选
    $("#allnot").click(function () {
       var ck=$("input[name='ck[]']");
        for(var i=0;i<ck.length;i++){
                $(ck[i]).prop('checked',false)
        }
    })
    //反选
    $("#fan").click(function () {
        var ck=$("input[name='ck[]']");
        for(var i=0;i<ck.length;i++){
            if($(ck[i]).prop('checked')==true){
                $(ck[i]).prop('checked',false)
            }else{
                $(ck[i]).prop('checked',true)
            }
        }
    })

</script>