IT评测·应用市场-qidao123.com

标题: JS点击对应复选框，对应内容地区隐藏 [打印本页]
作者: 嚴華    时间: 2025-1-14 04:16
标题: 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企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/) Powered by Discuz! X3.4