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

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

 

<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>

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

javascript">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相对应