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

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

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

 

1. <div class="setting">
2.                 <img src="./img/setting.png" alt="">
3.                 <div class="setBox">
4.                     <label for="idBox" style="display: flex;align-items: center;">
5.                         <input type="checkbox" id="idBox" checked />id
6.                     </label>
7.                     <label for="companyName" style="display: flex;align-items: center;">
8.                         <input type="checkbox" id="companyName" checked/>公司名称
9.                     </label>
10.                     <label for="goodsImg" style="display: flex;align-items: center;">
11.                         <input type="checkbox" id="goodsImg" checked/>商品图片
12.                     </label>
13.                     <label for="calling" style="display: flex;align-items: center;">
14.                         <input type="checkbox" id="calling" checked/>行业
15.                     </label>
16.                     <label for="switchStatus" style="display: flex;align-items: center;">
17.                         <input type="checkbox" id="switchStatus" checked/>待审核
18.                     </label>
19.                     <label for="standStatus" style="display: flex;align-items: center;">
20.                         <input type="checkbox" id="standStatus" checked/>商品数量
21.                     </label>
22.                     <label for="tel" style="display: flex;align-items: center;">
23.                         <input type="checkbox" id="tel" checked/>联系电话
24.                     </label>
25.                     <label for="createTime" style="display: flex;align-items: center;">
26.                         <input type="checkbox" id="createTime" checked/>创建时间
27.                     </label>
28.                 </div>
29.             </div>

复制代码

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

1. <div class="pageBreak">
2.         <div class="title">
3.             <div class="idBox">id</div>
4.             <div class="companyName">公司名称</div>
5.             <div class="goodsImg">商品图片</div>
6.             <div class="calling">行业</div>
7.             <div class="switchStatus">待审核</div>
8.             <div class="standStatus">商品数量</div>
9.             <div class="tel">联系电话</div>
10.             <div class="createTime">创建时间</div>
11.             <div class="operate">操作</div>
12.         </div>
13.         <div id="pageContent">
14.         </div>
15.         <div id="footer">
16.             <div id="footerPage"></div>
17.             <span><input type="number" id="inNum" /><button id="jump">跳转</button></span>
18.         </div>
19.     </div>

复制代码

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

1. function settingHide() {
2.     // 获取所有位于 `.setBox` 内的复选框元素
3.     let checkboxes = $('.setBox input[type="checkbox"]');
4.    
5.     // 创建一个空对象 `result` 用来存储复选框的 ID 和其选中状态
6.     let result = {};
8.     // 遍历每一个复选框元素
9.     checkboxes.each(function () {
10.         // 获取复选框的 id 属性作为名称
11.         let name = $(this).attr('id');
12.         
13.         // 获取复选框的选中状态 (true 为选中，false 为未选中)
14.         let checked = $(this).prop('checked');
15.         
16.         // 将复选框的名称和状态存入 `result` 对象
17.         result[name] = checked;
18.     });
20.     // 遍历 `result` 对象的每一项，控制与复选框 ID 相对应的元素的显示与隐藏
21.     for (let k in result) {
22.         // 将复选框的名称转化为字符串
23.         let elements = k.toString();
24.         
25.         // 默认情况下，显示与复选框 ID 相同类名的元素
26.         $(`${`.` + elements}`).css("display", "block");
27.         
28.         // 如果复选框的状态为未选中 (false)，则隐藏对应的元素
29.         if (result.hasOwnProperty(k) && result[k] === false) {
30.             // 隐藏与复选框 ID 相同类名的元素
31.             $(`${`.` + elements}`).css("display", "none");
32.         }
33.     }
34. }

复制代码

获取所有的复选框，遍历谁未被选中，将其设为隐藏
注意必要将你要隐藏的地区class与复选框id相对应 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。