我们做的是控制台,首先在第一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