JS点击对应复选框，对应内容地区隐藏
如果页面上的内容是正常表现的，则复选框默认勾选https://i-blog.csdnimg.cn/direct/f2d0028031a84507bbb29b6c218abb36.png
点击复选框之后对应的地区就会隐藏
https://i-blog.csdnimg.cn/direct/dc56f63c0fdd480986c81e16f1e3a8bd.png
<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');
// 创建一个空对象 `result` 用来存储复选框的 ID 和其选中状态
let result = {};
// 遍历每一个复选框元素
checkboxes.each(function () {
// 获取复选框的 id 属性作为名称
let name = $(this).attr('id');
// 获取复选框的选中状态 (true 为选中，false 为未选中)
let checked = $(this).prop('checked');
// 将复选框的名称和状态存入 `result` 对象
result = checked;
});
// 遍历 `result` 对象的每一项，控制与复选框 ID 相对应的元素的显示与隐藏
for (let k in result) {
// 将复选框的名称转化为字符串
let elements = k.toString();
// 默认情况下，显示与复选框 ID 相同类名的元素
$(`${`.` + elements}`).css("display", "block");
// 如果复选框的状态为未选中 (false)，则隐藏对应的元素
if (result.hasOwnProperty(k) && result === false) {
// 隐藏与复选框 ID 相同类名的元素
$(`${`.` + elements}`).css("display", "none");
}
}
}
获取所有的复选框，遍历谁未被选中，将其设为隐藏
注意必要将你要隐藏的地区class与复选框id相对应
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]