前端控台，添加checkbox，复选框，支持多选，单选，全选，取消全选。VUE和JQ都兼容

我们做的是控制台，首先在第一th写上多选框，用来做全选按钮
<th>
   <label for="checkTop" href="javascript:;">
      <input type="checkbox" οnclick="isCheckAll(this)" name="topCheckbox" value="top" id="checkTop">
   </label>
</th>

然后我们在最外层套一个ID方便找下边的复选框，放在复选框外层就可以

id="reservationCheckbox1"

最后我们在td里写入复选框。

<td> <label :for="'check' + index" href="javascript:;"> <input type="checkbox" οnclick="onChecked(this)" name="userBox" :value="item.id" :id="'check' + index"> </label> </td>

//这些是JQ，根据你的需求可以改成VUE，
//复选框
//全选时判断调方法
function isCheckAll() {
    if ($("#checkTop[type='checkbox']").is(':checked')){
        checkAll();
    }else {
        cancelCheckAll();
    };
}

//全选
function checkAll() {
    vue.checkAll = false;
    // 选中插入数组中
    var chk_value = [];
    // 将数组中的数据转化成接口需要的形式存储
    var chk_data = '';
    $("#reservationCheckbox1").find('input:checkbox').each(function () {
        $(this).prop('checked', true);
    });
    $("#reservationCheckbox1").find('input[name="userBox"]:checked').each(function () { //遍历，将所有选中的值放到数组中
        chk_value.push($(this).val());
    });
    //把值放到vue数组中在页面显示和传值用
    vue.selectedNum = chk_value.length;
    vue.selectedArray = chk_value;
    for (var i = 0; i < vue.selectedNum ; i++) {
        if(i == 0){
            chk_data += vue.selectedArray[i]
        }else{
            chk_data +=',' + vue.selectedArray[i];
        }

    }
    vue.selectedData = chk_data;
}

//或者 取消
function cancelCheckAll() {
    vue.checkAll = true;
    // 选中插入数组中
    var chk_value = [];
    // 将数组中的数据转化成接口需要的形式存储
    var chk_data = '';
    $("#reservationCheckbox1").find('input:checkbox').each(function () {
        $(this).prop('checked', false);
    });
    $("#reservationCheckbox1").find('input[name="userBox"]:checked').each(function () { //遍历，将所有选中的值放到数组中
        chk_value.push($(this).val());
    });
    //把值放到vue数组中在页面显示和传值用
    vue.selectedNum = chk_value.length;
    vue.selectedArray = chk_value;
    vue.selectedData = chk_data;
}

// 多选
function onChecked() {
    // 选中插入数组中
    var chk_value = [];
    // 选中的tel插入数组中
    // 将数组中的数据转化成接口需要的形式存储
    var chk_data = '';
    $("#reservationCheckbox1").find('input[name="userBox"]:checked').each(function () { //遍历，将所有选中的值放到数组中
        chk_value.push($(this).val());
    });
    //把值放到vue数组中在页面显示和传值用
    vue.selectedNum = chk_value.length;
    vue.selectedArray = chk_value;
    //alert(chk_value.length==0 ?'你还没有选择任何内容！':chk_value);
    for (var i = 0; i < vue.selectedNum ; i++) {
        if(i == 0){
            chk_data += vue.selectedArray[i]
        }else{
            chk_data +=',' + vue.selectedArray[i];
        }
    }
    vue.selectedData = chk_data;
}

首先在data里定义几个变量用来存储需要的值，

         //复选框
         //选中的数组
         checkAll:true,
         selectedNum:'',
         selectedArray:[],
         //选中的数组转化拼接类型
         selectedData:'',

这样一个多选，全选，取消全选，就可以了。

记录方便以后复制粘贴，如有不懂或者有更简单的请联系我，谢谢。wx：862166277