JavaScript实现复选框控制元素显隐功能页面加载时不生效如何解决

问题原因&修复方案 #

1 你之前的CSS方案失效的两个核心原因 #

• CSS选择器ID写错：你CSS里写的是#show-presell-text（横杠连接），但实际元素ID是show_presell_text（下划线连接），选择器不匹配自然不生效
• 目标div重复定义了class属性：你写的<div class="row" id="show_presell_text" class="xxx">同一个标签写了两次class，浏览器只会识别第一个class="row"，后面的动态class判断会被直接忽略

2 推荐解决方案（兼容后端数据判断+JS逻辑，不依赖纯CSS） #

你已经写了presellTXT()函数可以直接根据复选框状态控制显示隐藏，只需要在页面加载完成后主动调用一次这个函数即可，不用额外写CSS：

// 页面DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  presellTXT();
});

这样不管后端返回的$product->prd_presell是勾选还是未勾选状态，页面加载后都会自动执行你写的判断逻辑，自动控制文本输入框的显隐，完全匹配你的需求。

3 如果要修复CSS方案也可以这么改 #

首先修正CSS选择器：

#show_presell_text.hidden {
    display: none !important;
}

然后修正div的class写法，把两个class合并：

<div class="row @if(!empty($product) && $product->prd_presell != 'TRUE') hidden @endif" id="show_presell_text">

内容的提问来源于stack exchange，提问作者Pouya Vaghefi