当然可行啦！这种通过判断复选框的md-checked类是否存在，来控制.notifications元素显示隐藏的思路非常合理，而且有两种常见的实现方式，都很容易上手：

一、纯CSS方案（推荐，简单高效） #

如果你的DOM结构允许，纯CSS就能实现这个需求，不需要写任何JavaScript，性能还更好。根据复选框和.notifications元素的层级关系，选择对应的选择器即可：

情况1：复选框和.notifications是相邻兄弟元素 #

/* 当复选框拥有md-checked类时，隐藏紧跟其后的.notifications元素 */
.md-checked + .notifications {
  display: none;
}

情况2：复选框的父容器拥有md-checked类，.notifications是后代元素 #

/* 当父容器有md-checked类时，隐藏内部的.notifications元素 */
.md-checked .notifications {
  display: none;
}

这种方案的优势是无需监听事件，浏览器会自动根据类的变化应用样式，非常适合简单的显示隐藏需求。

二、JavaScript方案（适合复杂逻辑场景） #

如果需要在隐藏/显示时执行额外逻辑（比如添加动画、发送统计请求等），就可以用JavaScript来实现：

监听复选框状态变化 #

// 先获取复选框和目标元素
const checkbox = document.querySelector('你的复选框选择器'); // 替换成实际选择器，比如'input[type="checkbox"]'
const notifications = document.querySelector('.notifications');

// 监听复选框的change事件
checkbox.addEventListener('change', function() {
  if (this.classList.contains('md-checked')) {
    notifications.style.display = 'none';
    // 这里可以添加额外逻辑，比如：
    // console.log('通知已隐藏');
    // notifications.classList.add('fade-out');
  } else {
    notifications.style.display = 'block'; // 恢复原来的显示方式，也可以用'flex'等
    // 显示时的额外逻辑
    // notifications.classList.remove('fade-out');
  }
});

// 页面加载时初始化状态（防止刷新后复选框是勾选状态但通知没隐藏）
window.addEventListener('DOMContentLoaded', function() {
  if (checkbox.classList.contains('md-checked')) {
    notifications.style.display = 'none';
  }
});

这种方案的优势是灵活性高，可以处理更复杂的业务场景。

总的来说，你的思路完全没问题，选哪种方案取决于你的具体需求~

内容的提问来源于stack exchange，提问作者Hugo Seleiro