html css 全选 反选

处理批量操作 全选 反选

1、展示的页面 （示例用的是前端bootstrap   table中的才是核心部分）
<div class="row">
  <div class="col-md-12">
    <div class="panel panel-primary">
      <!-- Default panel contents -->
      <div class="panel-heading">
        用户列表
      </div>
      <!-- Table  -->
      <table class="table">
        <thead>
          <tr>
            <th></th>
            <th>ID</th>
            <th>邮箱</th>
          </tr>
        </thead>
        <tbody>
          <tr class="list-group-item-success">
            <td><input type="checkbox" name="checkbox" value="1"</td>
            <td>12</td>
            <td>123123123</td>
          </tr>
          <tr>
              <td align="pull-left" colspan="2" >
                  <button class="btn btn-primary all" >全选</button>
                  <button class="btn btn-info nall" >反选</button>
              </td>
              <td align="pull-right" colspan="5">
                  <button class="btn  btn-danger for" >禁用</button>
                  <button class="btn btn-success use" >启用</button>
                  <button class="btn btn-primary del" >删除</button>
              </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>


2、对应的js操作   (需要引入jq的js文件)
<script>
$(function(){
    //全选操作
    $(".all").click(function(){
        $("input[type='checkbox']").prop("checked", true);
    })

    //反选操作
    $(".nall").click(function(){
        $("input[name='checkbox']").each(function(){
            if($(this).attr("checked")) {
                this.checked = !this.checked;
            } else {
                $(this).attr("checked",true);
            }
        })
    })

    //禁用
    $(".for").click(function(){
        var id = '';
        $.each($('input:checkbox'),function(){
            if(this.checked){
                id += $(this).val() + ',';
            }
        })
        if(id == ''){
            alert('请先选择要操作的用户');
            return false;
        }
        var r = confirm('确定呀执行该操作?');
        if(!r){
            return false;
        }

        $.post("提交地址",传递的参数，json格式,function(res){

            //结果的处理 由你的res格式决定 当前格式为{"msg":"123","status":"200"}
            data = JSON.parse(res);
            alert(data.msg);
            if(data.status==200){
                location.reload();
            } else {
                return false;
            }
        })
    })

    //启用
    $(".use").click(function(){
        var id = '';
        $.each($('input:checkbox'),function(){
            if(this.checked){
                id += $(this).val() + ',';
            }
        })
        if(id == ''){
            ralert('请先选择要操作的用户');
            return false;
        }

        var r = confirm('确定呀执行该操作?');
        if(!r){
            return false;
        }

        $.post("提交地址",{id:id,status:1
        },function(res){
            data = JSON.parse(res);
            alert(data.msg);
            if(data.status==200){
                location.reload();
            } else {
                return false;
            }
        })
    })

    //删除
    $(".del").click(function(){
        var id = '';
        $.each($('input:checkbox'),function(){
            if(this.checked){
                id += $(this).val() + ',';
            }
        })
        if(id == ''){
            alert('请先选择要操作的用户');
            return false;
        }

        var r = confirm('确定呀执行该操作?');
        if(!r){
            return false;
        }

        $.post("提交地址",{
            id:id
        },function(res){
            data = JSON.parse(res);
            alert(data.msg);
            if(data.status==200){
                location.reload();
            } else {
                return false;
            }
        })
    })
})
</script>