HTML+JS实现简单的多选选项的全选反选按钮

已于 2025-03-12 14:16:50 修改
阅读量471 收藏 6
点赞数 8
分类专栏： Html5 文章标签： html javascript 前端
于 2025-03-12 14:11:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_36158551/article/details/146203650
版权

1. HTML+JS实现简单的多选选项的全选反选按钮

  多选菜单的全选和反选按钮十分常见,今天就实现一个简单的全选和全不选效果。
  全选反选按钮关键点在于check类型input的checked属性,当该属性为true时为选中状态,为false时为不选中状态。
在这里插入图片描述

在这里插入图片描述

1.1. 代码

1.1.1. page-checkbox-select.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>代表建议</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="Sat, 01 Dec 2001 00:00:00 GMT">
    <script type="text/javascript" src="../static/js/init-rem.js"></script>
    <link rel="stylesheet" type="text/css" href="../static/css/mui.min.css"/>
    <script type="text/javascript" src="../static/js/mui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../static/css/mui-icons-extra.css"/>
    <link rel="stylesheet" type="text/css" href="../static/css/mui.loading.css"/>
    <script type="text/javascript" src="../static/js/mui.loading.js"></script>
    <script type="text/javascript" src="../static/js/my-mui-loading.js"></script>
    <link rel="stylesheet" type="text/css" href="../static/css/mescroll.min.css"/>
    <script type="text/javascript" src="../static/js/mescroll.min.js"></script>
    <script type="text/javascript" src="../static/js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="../static/helper/net-helper.js"></script>
    <script type="text/javascript" src="../static/helper/init-helper.js"></script>
    <link rel="stylesheet" type="text/css" href="../static/css/base.css"/>
    <link rel="stylesheet" type="text/css" href="../css/page-checkbox-select.css"/>
    <script type="text/javascript" src="../static/js/vconsole.min.js"></script>
    <script type="text/javascript">
        // var vc = new VConsole()
    </script>
</head>
<body>
<!--标题区域-->
<div class="base-title-bar">
    <span class="base-title-back" onclick="history.go(-1)">
        <img src="../img/icon/icon_back.png"/>
    </span>
    <h1>代表建议</h1>
    <span class="base-title-back"></span>
</div>
<!--内容区域-->
<div class="base-mescroll-white">
    <!--搜索-->
    <div class="query-layout">
        <div class="query-input">
            <span class="query-img">
                <img src="../img/icon/icon-query-gray.png"/>
            </span>
            <input class="base-ellipsis" type="text"
                   id="name" name="name"
                   placeholder="请输入搜索内容" value=""/>
        </div>
        <span class="query-title">搜索</span>
    </div>
    <!--搜索数量-->
    <div class="base-header">
        <span class="icon"></span>
        <span class="text base-ellipsis">
            共搜索出<em id="total_num">0</em>条数据
        </span>
    </div>
    <div class="check-layout" onclick="checkClick()">
        <span class="check-img">
            <img id="check_img_id" src="../img/icon/icon_select_no.png"/>
        </span>
        <span id="check_txt_id" class="check-txt">全选</span>
    </div>
    <!--列表-->
    <div class="mescroll base-mescroll5">
        <ul id="list_id" class="list-layout"></ul>
    </div>
</div>
<script type="text/javascript" src="../js/page-checkbox-select.js"></script>
</body>
</html>

1.1.2. page-checkbox-select.css

/*搜索布局*/
.query-layout {
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    align-items: center;
    -webkit-align-items: center;
    padding: 0.25rem 0.2rem 0.2rem 0.2rem;
    background-color: white;
}

.query-input {
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    align-items: center;
    -webkit-align-items: center;
    height: 0.7rem;
    line-height: 0.7rem;
    flex: 1;
    opacity: 1;
    background-color: #f5f5f5;
    border-radius: 0.5rem;
    border: 0.01rem solid #999999;
}

.query-input > input {
    flex: 1;
    font-size: 0.30rem;
    margin: 0;
    padding: 0 0 0 0.1rem;
    color: #333333;
    opacity: 1;
    height: 0.6rem;
    line-height: 0.6rem;
    background-color: #f5f5f5;
    border-radius: 0.5rem;
    border: 0.01rem solid #f5f5f5;
}

.query-img {
    overflow: hidden;
    width: 0.7rem;
    height: 0.7rem;
    display: flex;
    border-radius: 0.5rem;
    justify-content: center;
    align-items: center;
    margin: 0 0 0 0;
}

.query-img img {
    height: 60%;
}

.query-title {
    font-size: 0.30rem;
    color: dodgerblue;
    margin-left: 0.2rem;
}

/*列表布局*/
.list-layout {
    overflow-x: hidden;
}

.list-layout li {
    overflow-x: hidden;
    background: #fff;
    margin: 0.2rem 0.2rem;
    padding: 0.2rem 0.1rem;
    border: 0.02rem solid #efeff4;
    border-radius: 0.1rem;
    box-shadow: 0.03rem 0.03rem 0.03rem 0.03rem #efeff4;
}

.list-item {
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

.list-item-img {
    overflow: hidden;
    width: 1.5rem;
    height: 1.0rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0.2rem 0 0.1rem;

}




.list-item-title {
    color: #000;
    font-size: 0.32rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    -webkit-line-clamp: 1;
    line-height: 0.5rem;
}

.list-item-content {
    color: #333;
    font-size: 0.30rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    -webkit-line-clamp: 1;
}


.list-item-content-bottom {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.list-item-time-label {
    display: inline-block;
    color: #999999;
    font-size: 0.26rem;
}

.list-item-status-layout {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.list-item-status-label {
    color: #999999;
    font-size: 0.26rem;
    margin-right: 0.1rem;
}

.list-item-status-value {
    color: #007AFF;
    font-size: 0.26rem;
}


.li-layout {
    overflow: hidden;
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    padding: 0.1rem 0.2rem;
}

.item-checkbox {
    width:0.4rem;
    height:0.4rem;
}

.li-item-layout {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 0.3rem;
    margin-right: 0.2rem;
}

.check-layout{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.check-img {
    overflow: hidden;
    width: 0.9rem;
    height: 0.7rem;
    display: flex;
    border-radius: 0.5rem;
    justify-content: center;
    align-items: center;
    margin: 0 0 0 0;
}
.check-img img {
    height: 80%;
}
.check-txt{
    color: #333;
    font-size: 0.34rem;
}

1.1.3. page-checkbox-select.js

var pageType = getParamByKey('pageType');
var dataModel = {
    isSelectAll: false,
    totalSize: 0//总条数
};
$(function () {
    //返回上一页面
    backPage()
    //初始化数据
    initData();
});

/**
 * 初始化数据
 */
function initData() {
    //联网加载数据
    getListData(1, 10,
        function (curPageData) {
            //设置列表数据
            setListData(curPageData);
        }, function () {
        });
}

/**
 * 设置列表数据
 * @param {Object} curPageData
 */
function setListData(listData) {
    var listDom = document
        .getElementById("list_id");
    listData.forEach(function (item, index) {
        var htmlStr =
            ` <div class="li-layout"  
                   onclick="goDetail2(this)" 
                   data-title=" ${item.suggestionTitle || ''}">
                   <input class="item-checkbox" type="checkbox"
                          value="${item.suggestionTitle || ''}" > 
                           <label class="li-item-layout">
                                  <div class="list-item-title">
                                         ${item.suggestionTitle || ''}
                                  </div>
                                  <div class="list-item-content">
                                         ${item.content || ''}
                                  </div>
                           </label>  
                   </input>
            </div>`
        var liDom = document.createElement("li");
        liDom.innerHTML = htmlStr;
        liDom.setAttribute('data-id', item.id);
        listDom.appendChild(liDom); //加在列表的后面,上拉加载
    })
}

/**
 * 加载列表数据
 */
function getListData(pageNum, pageSize,
                     successCallback, errorCallback) {
    $.getJSON(`../json/checkboxInfo.json`,
        function (result) {
            var newArr = [];
            if (result && isNotNull(result.rows)) {
                $('#total_num').html(result.total);
                dataModel.totalSize = result.total;
                if (result) {
                    newArr = newArr.concat(result.rows);
                    successCallback && successCallback(newArr);
                }
            } else {
                successCallback && successCallback(newArr);
            }
        });
}

function htmlForResult(webParms) {
    console.log("adfewf====", webParms)
}


/**
 * 单击进详情
 */
function goDetail2(obj) {
    var title = $(obj).attr('data-title');
    mui.toast(title)
}

/**
 * 设置全选、全不选
 */
function checkClick() {
    var src = ''
    var txt = ''
    if (dataModel.isSelectAll) {
        src = '../img/icon/icon_select_no.png'
        txt = '全不选'
    } else {
        src = '../img/icon/icon_select.png'
        txt = '全选'
    }
    dataModel.isSelectAll = !dataModel.isSelectAll
    $('#check_img_id').attr('src', src);
    $('#check_txt_id').html(txt);
    var itemCheckbox = document
        .getElementsByClassName("item-checkbox");
    for (var i = 0; i < itemCheckbox.length; i++) {
        var h = itemCheckbox[i];
        h.checked = dataModel.isSelectAll;
    }
}

1.1.4. checkboxInfo.json

{
  "total": 20,
  "rows": [
    {
      "createBy": "1",
      "createTime": "2024-03-25 21:48:24",
      "updateBy": "1",
      "updateTime": "2024-03-25 21:48:24",
      "remark": null,
      "id": "cb6d917f-39ef-4d36-9904-b6f344e405dc",
      "suggestionTitle": "0325测试",
      "content": "测试",
      "initalRepresentative": "测试",
      "handleTime": null,
      "status": "2",
      "unitAndPostion": "测试",
      "mobile": "",
      "contactStation": "1",
      "imgName": "社区服务.jpg",
      "imgPath": "/lingbao/社区服务_1711374500511.jpg",
      "fileName": "testDoc.docx",
      "filePath": "/lingbao/testDoc_1711374503149.docx",
      "delFlag": null,
      "targetDept": "100",
      "targetDeptName": "灵宝市人大机关",
      "handleUnit": null,
      "handleUnitName": null,
      "handleId": null,
      "handleSuggestion": null,
      "evaluate": null,
      "evaluateContent": null,
      "handleOption": null,
      "pageName": null
    },
    {
      "createBy": "1",
      "createTime": "2024-03-19 15:07:04",
      "updateBy": "1",
      "updateTime": "2024-03-19 15:07:04",
      "remark": null,
      "id": "b9f6e77f-7046-413b-b747-549c0feed472",
      "suggestionTitle": "阿斯顿",
      "content": "阿斯顿",
      "initalRepresentative": "221",
      "handleTime": null,
      "status": "2",
      "unitAndPostion": "阿斯顿",
      "mobile": "11",
      "contactStation": "2",
      "imgName": "renxiang.jpeg",
      "imgPath": "/npclb/renxiang_1710832016573.jpeg",
      "fileName": "地震预案.pdf",
      "filePath": "/npclb/地震预案_1710832021934.pdf",
      "delFlag": null,
      "targetDept": "201",
      "targetDeptName": "教科文委",
      "handleUnit": null,
      "handleUnitName": null,
      "handleId": null,
      "handleSuggestion": null,
      "evaluate": null,
      "evaluateContent": null,
      "handleOption": null,
      "pageName": null
    },
    {
      "createBy": "1",
      "createTime": "2024-03-19 11:59:51",
      "updateBy": "1",
      "updateTime": "2024-03-19 11:59:51",
      "remark": null,
      "id": "700c8dfd-67fc-4c92-a1db-0eb123806f27",
      "suggestionTitle": "测试1159",
      "content": "测试1159测试1159",
      "initalRepresentative": "测试1159",
      "handleTime": null,
      "status": "2",
      "unitAndPostion": "测试1159",
      "mobile": "18888999098",
      "contactStation": "1",
      "imgName": null,
      "imgPath": null,
      "fileName": null,
      "filePath": null,
      "delFlag": null,
      "targetDept": "205",
      "targetDeptName": "选工委",
      "handleUnit": null,
      "handleUnitName": null,
      "handleId": null,
      "handleSuggestion": null,
      "evaluate": null,
      "evaluateContent": null,
      "handleOption": null,
      "pageName": null
    },
    {
      "createBy": "1",
      "createTime": "2024-03-19 10:41:48",
      "updateBy": "1",
      "updateTime": "2024-03-19 10:41:48",
      "remark": null,
      "id": "bc96741f-efb7-4a1c-9d0e-60d89dea13a9",
      "suggestionTitle": "0319测试",
      "content": "111",
      "initalRepresentative": "11",
      "handleTime": null,
      "status": "2",
      "unitAndPostion": "11",
      "mobile": "111",
      "contactStation": "2",
      "imgName": null,
      "imgPath": null,
      "fileName": null,
      "filePath": null,
      "delFlag": null,
      "targetDept": "201",
      "targetDeptName": "教科文委",
      "handleUnit": null,
      "handleUnitName": null,
      "handleId": null,
      "handleSuggestion": null,
      "evaluate": null,
      "evaluateContent": null,
      "handleOption": null,
      "pageName": null
    },
    {
      "createBy": "1",
      "createTime": "2024-03-19 10:41:24",
      "updateBy": "1",
      "updateTime": "2024-03-19 10:41:24",
      "remark": null,
      "id": "01185ab4-ace4-454c-9d54-d237a2969907",
      "suggestionTitle": "镇建议测试",
      "content": "建议测试建议测试建议测试",
      "initalRepresentative": "Bcc",
      "handleTime": null,
      "status": "2",
      "unitAndPostion": "SSSe",
      "mobile": "19999888776",
      "contactStation": "1",
      "imgName": null,
      "imgPath": null,
      "fileName": null,
      "filePath": null,
      "delFlag": null,
      "targetDept": "201",
      "targetDeptName": "教科文委",
      "handleUnit": null,
      "handleUnitName": null,
      "handleId": null,
      "handleSuggestion": null,
      "evaluate": null,
      "evaluateContent": null,
      "handleOption": null,
      "pageName": null
    },
    {
      "createBy": "1",
      "createTime": "2024-03-19 10:39:34",
      "updateBy": "1",
      "updateTime": "2024-03-19 10:39:34",
      "remark": null,
      "id": "e49e8a71-b198-427e-b247-5be145526a3f",
      "suggestionTitle": "市建议测试",
      "content": "建议测试建议测试建议测试",
      "initalRepresentative": "Acc",
      "handleTime": null,
      "status": "2",
      "unitAndPostion": "sss",
      "mobile": "19999999777",
      "contactStation": "1",
      "imgName": null,
      "imgPath": null,
      "fileName": null,
      "filePath": null,
      "delFlag": null,
      "targetDept": "208",
      "targetDeptName": "城环委",
      "handleUnit": null,
      "handleUnitName": null,
      "handleId": null,
      "handleSuggestion": null,
      "evaluate": null,
      "evaluateContent": null,
      "handleOption": null,
      "pageName": null
    },
    {
      "createBy": "1",
      "createTime": "2024-03-04 15:58:57",
      "updateBy": "123",
      "updateTime": "2024-03-04 16:06:25",
      "remark": null,
      "id": "53cd8caa-80b8-4073-abd1-aee45ce26369",
      "suggestionTitle": "11",
      "content": "22",
      "initalRepresentative": "33",
      "handleTime": null,
      "status": "3",
      "unitAndPostion": "44",
      "mobile": "18888888888",
      "contactStation": "1",
      "imgName": null,
      "imgPath": null,
      "fileName": null,
      "filePath": null,
      "delFlag": null,
      "targetDept": "201",
      "targetDeptName": "教科文委",
      "handleUnit": null,
      "handleUnitName": null,
      "handleId": null,
      "handleSuggestion": "12345",
      "evaluate": null,
      "evaluateContent": null,
      "handleOption": null,
      "pageName": null
    },
    {
      "createBy": "2",
      "createTime": "2024-01-11 14:37:07",
      "updateBy": "2",
      "updateTime": "2024-01-11 14:37:19",
      "remark": null,
      "id": "6bd2c1e2-911d-461c-a1ac-1971ae5dfe0e",
      "suggestionTitle": "测1102",
      "content": "2344",
      "initalRepresentative": "231",
      "handleTime": null,
      "status": "4",
      "unitAndPostion": "32421",
      "mobile": "2343214",
      "contactStation": "1",
      "imgName": "icon_affix_1704955019472.png",
      "imgPath": "/xin-wu-grid/icon_affix_1704955019472.png",
      "fileName": "icon_base_house_add_1704955022206.png",
      "filePath": "/xin-wu-grid/icon_base_house_add_1704955022206.png",
      "delFlag": null,
      "targetDept": null,
      "targetDeptName": null,
      "handleUnit": null,
      "handleUnitName": null,
      "handleId": null,
      "handleSuggestion": null,
      "evaluate": "2",
      "evaluateContent": "3243544325",
      "handleOption": null,
      "pageName": null
    },
    {
      "createBy": "2",
      "createTime": "2024-01-11 10:28:16",
      "updateBy": "2",
      "updateTime": "2024-01-11 11:32:52",
      "remark": null,
      "id": "7184c1ad-396f-4b5c-a259-3aedbd52b92d",
      "suggestionTitle": "建议标题1101",
      "content": "建议内容",
      "initalRepresentative": "发起建议代表",
      "handleTime": null,
      "status": "3",
      "unitAndPostion": "工作单位及职务额",
      "mobile": "1787878787",
      "contactStation": "1",
      "imgName": "icon_add_1704940073320.png,icon_app_1704940075958.png",
      "imgPath": "/xin-wu-grid/icon_add_1704940073320.png,/xin-wu-grid/icon_app_1704940075958.png",
      "fileName": "icon_apply_activity_theme_1704940080387.png,267b12b7e91910c246249c78f70fe5f2_1704940089274.mp4",
      "filePath": "/xin-wu-grid/icon_apply_activity_theme_1704940080387.png,/xin-wu-grid/267b12b7e91910c246249c78f70fe5f2_1704940089274.mp4",
      "delFlag": null,
      "targetDept": null,
      "targetDeptName": "人事科",
      "handleUnit": null,
      "handleUnitName": null,
      "handleId": null,
      "handleSuggestion": null,
      "evaluate": "1",
      "evaluateContent": "4325",
      "handleOption": null,
      "pageName": null
    },
    {
      "createBy": "2",
      "createTime": "2024-01-11 10:21:47",
      "updateBy": "2",
      "updateTime": "2024-01-11 10:21:47",
      "remark": null,
      "id": "c4cf9c24-3f10-40ff-a461-25108021d751",
      "suggestionTitle": "建议标题101801",
      "content": "内容",
      "initalRepresentative": "发起建议代表",
      "handleTime": null,
      "status": null,
      "unitAndPostion": "工作单位及职务",
      "mobile": "17676767676",
      "contactStation": "2",
      "imgName": "",
      "imgPath": "",
      "fileName": "",
      "filePath": "",
      "delFlag": null,
      "targetDept": null,
      "targetDeptName": null,
      "handleUnit": null,
      "handleUnitName": null,
      "handleId": null,
      "handleSuggestion": null,
      "evaluate": null,
      "evaluateContent": null,
      "handleOption": null,
      "pageName": null
    }
  ],
  "code": 200,
  "msg": "查询成功"
}

1.2. 方案

1.2.1. html]如何扩大checkbox点击区域

  用 label 包裹，扩大 label 尺寸

 <input class="item-checkbox" type="checkbox"
        value="${item.suggestionTitle || ''}" > 
        <label class="li-item-layout">
                <div class="list-item-title">
                     ${item.suggestionTitle || ''}
                </div>
               <div class="list-item-content">
                    ${item.content || ''}
              </div>
     </label>  
</input>

  （1）方法一：将input和label放在同一个标签p中同时lable的for属性的值等于input的id属性值就可以实现点击label同时控制input 。

<input type="checkbox" id="c2">
<label for="c2">内容2</label>

  （2）方法二：abel联动checkbox时，若label包含在checkbox外层时label不需for属性，设置label的display属性为block时可以使整个div联动。

 <label>
     <input type="checkbox">
     <span>内容1</span>
 </label>

1.2.2. 扩大checkbox的点击区域

  具体是为了在表格中点击 td 也能选中，做法是为 td 元素添加点击事件，在点击事件里面触发checkbox的点击事件：

<td onclick="clickTd($(this))"><input type="checkbox" name="task"  onclick="oncheckAll(event)"></td>

function clickTd($t){
    $t.children("input").click();
}

  当这样的问题是点击checkbox的时候，因为页面元素所在区域重叠，点击事件向上传递，会首先触发checkbox的点击事件，然后触发 td 的点击事件，然后 td 的点击事件会被再次触发，就相当于checkbox点击了两次，所以需要 checkbox 的点击事件执行完之后，让该点击事件停止传递。
  checkbox的点击事件里面加入拦截即可：

function oncheckAll(event){
    event.stopPropagation();
}
wps 字体对系统无效_wps 字体不显示怎么办 - 卡饭网
weixin_36281932的博客
12-23 8187
word文本字体显示不全怎么解决?字体全部显示出来方法介绍word文本字体显示不全怎么解决?字体全部显示出来方法介绍 使用办公软件office或wps时,经常会到word文本字体只显示上半身或只显示下半身,而上半部分或下半部分不见了!这是为什么呢?又怎么办呢?其实造成这种情况是因为word文本设置了固定的行距,之后,如果增大字体,就会因为行距不足而无法把字体全部显示出来了.所以,只要把固定行距解除...
WPS无法输入汉字？教你一步步排查解决！
最新发布
mmoo_python的博客
04-21 1228
打开WPS→文件→选项→自定义功能区。在键盘快捷方式中，为“切换输入法”分配独立快捷键（如Alt+Z）。WPS无法输入汉字的问题，通常可通过配置输入法关联、修复系统服务、更新软件版本等方式解决。建议用户优先尝试文中提供的核心方法，若问题持续，可结合系统日志（通过事件查看器）进一步分析。技术问题的排查需要耐心与系统性，逐步缩小故障范围，最终定位根源。掌握这些技巧后，面对类似办公软件问题，用户将能更高效地自主处理。
wps程序能打开不显示内容
qq_31146399的博客
10-22 4166
问题：wps打开word，桌面不显示内容 方法：1 打开word软件，电脑任务栏有这个图标，桌面不显示内容 打开任务管理器，点击点击查看word进程，点击进程会看到如下如所示，点击最大化就ok了。 方法二：重新安装wps，哈哈 ...
Ubuntu Linux 13.10 中WPS输入法无法跟随显示问题
流离马--枫林漫步
04-22 1271
我的是Ubuntu Linux 13.10，输入法除了WPS以外其他软件输入都有文字跟随显示，唯独在WPS中没有文字跟随框，无法选择输入的文字，换其它的输入法问题依旧。查阅资料后以如下方法解决： 安装qt4-qtconfig和ibus-qt4,安装ibus-qt4之后运行qt4-qtconfig在“界面”选项卡中选择“设置XIM输入风格”为“光标跟随风格（Over The Spot），保存设
wps隐藏文字和显示文字
weixin_41272269的博客
02-16 2578
wps的doc可以实现这个功能，Excel目前不可以实现。office同理。 文章目录1.隐藏文字步骤：效果：2.显示文字：步骤：效果：3. [拓展：隐藏表格中的文字]：步骤：效果如下： 1.隐藏文字 步骤： １．选中需要隐藏的文字， ２．右键选择字体， ３．在隐藏上面打上勾，如下图 效果： 2.显示文字： 步骤： １．选择菜单， ２．选项， ３．在隐藏文本上打上勾，如下图。 效果： 3...
字体安装成功但是wps不显示？
热门推荐
xitongzhijianet的博客
02-24 2万+
在编辑wps文档时，一些用户会给wps字体库添加需要的字体，但是发现字体安装成功，wps却没有显示，这是怎么回事？
WPS office综合诊断修复工具
08-14
WPS Office是一款流行的办公软件套装，它包含了文字处理、电子表格、演示文稿等多种功能，类似于微软的Office。然而，用户在使用过程中可能会遇到各种问题，如程序崩溃、默认格式设置异常或注册表错误等。为了解决...
WPSoffice在线预览编辑
07-21
7. **功能丰富**：除了基本的文字处理、表格制作和演示制作，WPS Office 还提供了一系列进阶功能，如模板库、图表制作、公式编辑等，帮助用户提升文档的专业性和美观度。 通过压缩包文件“webofficedemo”，我们...
WPS API帮助文档
12-10
WPS API，全称为WPS Application Programming Interface，是由金山软件提供的接口，允许开发者在Windows操作系统环境下对WPS Office产品进行深度定制和二次开发。通过这些API，开发者可以实现与WPS Word文档的交互，...
WPS Office轻松办公(文字篇)
06-17
本视频教程是指导初学者学习WPS的入门教程，视频中介绍了WPS Office 2019文字的基本概念和基础操作，如何创建与保存文档，输入文档内容，文档编辑修改，编辑界面及相关设置；设置文本格式，设置段落格式，应用特殊...
WPS Office之Word文字入门基础
06-09
在本课程“WPS Office之Word文字入门基础”中，我们将深入探讨如何高效地使用WPS文字进行文档处理，帮助初学者从零开始逐步成为职场文档编辑专家。WPS Office是一款由中国金山软件公司开发的办公软件套件，它包含与...
WPS表格文字显示不全？一键解决！
mmoo_python的博客
11-21 5296
通过调整WPS表格中单元格的格式设置，我们可以轻松解决文字显示不全的问题。具体方法是通过设置单元格的对齐方式为“常规”，并勾选“自动换行”选项。这样，无论单元格内的文字有多长，都能够全部显示出来，无需再手动双击单元格。希望这个解决方案能够帮助你更高效地使用WPS表格进行数据编辑和查看。此外，WPS作为一款功能强大的办公软件，还提供了许多其他实用的功能和设置选项。如果你在使用过程中遇到了其他问题或需要更多帮助，可以随时查阅WPS的官方文档或在线支持资源。
WPS光标消失，无法打字
效率平和
12-03 1万+
现象: WPS 打字时，光标突然消失，然后无法打字，过几秒钟又回来了。 用录屏工具观察任务管理器中的额进程，发现一个特别程序wpsrenderer.exe出现时，光标会消失。 网上查询了下，这个是WPS的云登录和广告推送程序，把它删除就好了。 我电脑上的路径： E:\Program Files\WPS Office\10.1.0.7245\10.1.0.7346\office6 我是通过ever...
为什么文本框里的字只显示一半_Word文档中文字显示不全的解决方法有哪些
weixin_35414484的博客
02-05 2万+
在Word 文档中，如果把段落中的文字字号设置大一点的字体，可能会出现文字显示不全的情况;表格中也可能出现这种情况，文字显示一半或都显示不出来，是什么原因?以下是学习啦小编为您带来的关于Word文档中文字显示不全，希望对您有所帮助。Word文档中文字显示不全对于段落中的文字而言，一般是由于设置的行距太小所致;对于表格而言，可能行指定了高度，由于指定的高度小于字体的高度，所以大于行高度的部分被遮盖。...
WPS文本框跨页显示方法
xgmiao的专栏
06-29 1万+
鼠标放在第一个文本框边界，然后右键，选择“创建文本框链接”，则鼠标指针变为罐状指针，用罐状指针单击第二个文本框边界，则在两个文本框间建立了链接(注意的是第二个文本框要是空的)。如果还想链接第三个文本框，请单击第二个文本框，采用同样方法创建链接即可。
逆向Mac版WPS(解除版本过期限制)
逆钟夕的忘忧阁
07-04 1万+
之前安装了Mac版office软件,感觉体量较大,后来发现网上有WPS的2016测试版本,就拿来用了,也比较稳定速度快,整体包也不大,平均每个210M,今天2018.07.02,我WPS突然打不开了随便打开就弹出 the alpha version expired! please update latest version .然后一个确定就退出了,三个都这样.image.png我也想升级最新版,你...
wps文档服务器授权怎么解,如何解决WPS提示授权已到期的问题
weixin_36378669的博客
08-12 1万+
如何解决WPS提示授权已到期的问题发布时间：2020-07-23 10:09:52来源：亿速云阅读：873作者：Leah本篇文章给大家分享的是有关如何解决WPS提示授权已到期的问题，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。WPS提示授权已到期的解决方法：首先点开设置并点击“配置和修理工具”；然后点击“高级(A)”并进入到“产品管理...
ImportError: cannot import name 'Protocol' from 'typing'
05-30
这个错误通常是由于使用了过期的 Python 版本引起的，'Protocol' 是 Python 3.8 中引入的新类型，如果你的 Python 版本低于 3.8，那么就会出现该错误。如果你的 Python 版本不低于 3.8，那么可能是你的代码中存在其他问题。 为了解决这个问题，可以尝试以下几个方法： 1. 更新你的 Python 版本至 3.8 或更高版本。 2. 检查你的代码中是否存在拼写错误或其他语法错误。 3. 确认你的代码中是否有导入 'typing' 模块的其他部分，在这些部分中导入 'Protocol' 可能会导致此错误。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值