JS点击对应复选框，对应内容区域隐藏

 如果页面上的内容是正常显示的，则复选框默认勾选

 点击复选框之后对应的区域就会隐藏

<div class="setting">
                <img src="./img/setting.png" alt="">
                <div class="setBox">
                    <label for="idBox" style="display: flex;align-items: center;">
                        <input type="checkbox" id="idBox" checked />id
                    </label>
                    <label for="companyName" style="display: flex;align-items: center;">
                        <input type="checkbox" id="companyName" checked/>公司名称
                    </label>
                    <label for="goodsImg" style="display: flex;align-items: center;">
                        <input type="checkbox" id="goodsImg" checked/>商品图片
                    </label>
                    <label for="calling" style="display: flex;align-items: center;">
                        <input type="checkbox" id="calling" checked/>行业
                    </label>
                    <label for="switchStatus" style="display: flex;align-items: center;">
                        <input type="checkbox" id="switchStatus" checked/>待审核
                    </label>
                    <label for="standStatus" style="display: flex;align-items: center;">
                        <input type="checkbox" id="standStatus" checked/>商品数量
                    </label>
                    <label for="tel" style="display: flex;align-items: center;">
                        <input type="checkbox" id="tel" checked/>联系电话
                    </label>
                    <label for="createTime" style="display: flex;align-items: center;">
                        <input type="checkbox" id="createTime" checked/>创建时间
                    </label>
                </div>
            </div>

放页面内分页数据渲染区域的HTML

 <div class="pageBreak">
        <div class="title">
            <div class="idBox">id</div>
            <div class="companyName">公司名称</div>
            <div class="goodsImg">商品图片</div>
            <div class="calling">行业</div>
            <div class="switchStatus">待审核</div>
            <div class="standStatus">商品数量</div>
            <div class="tel">联系电话</div>
            <div class="createTime">创建时间</div>
            <div class="operate">操作</div>
        </div>
        <div id="pageContent">
        </div>
        <div id="footer">
            <div id="footerPage"></div>
            <span><input type="number" id="inNum" /><button id="jump">跳转</button></span>
        </div>
    </div>

 在点击复选框时执行以下函数

function settingHide() {
    // 获取所有位于 `.setBox` 内的复选框元素
    let checkboxes = $('.setBox input[type="checkbox"]');
    
    // 创建一个空对象 `result` 用来存储复选框的 ID 和其选中状态
    let result = {};

    // 遍历每一个复选框元素
    checkboxes.each(function () {
        // 获取复选框的 id 属性作为名称
        let name = $(this).attr('id');
        
        // 获取复选框的选中状态 (true 为选中，false 为未选中)
        let checked = $(this).prop('checked');
        
        // 将复选框的名称和状态存入 `result` 对象
        result[name] = checked;
    });

    // 遍历 `result` 对象的每一项，控制与复选框 ID 相对应的元素的显示与隐藏
    for (let k in result) {
        // 将复选框的名称转化为字符串
        let elements = k.toString();
        
        // 默认情况下，显示与复选框 ID 相同类名的元素
        $(`${`.` + elements}`).css("display", "block");
        
        // 如果复选框的状态为未选中 (false)，则隐藏对应的元素
        if (result.hasOwnProperty(k) && result[k] === false) {
            // 隐藏与复选框 ID 相同类名的元素
            $(`${`.` + elements}`).css("display", "none");
        }
    }
}

获取所有的复选框，遍历谁未被选中，将其设为隐藏

注意需要将你要隐藏的区域class与复选框id相对应