Pug/Jade，根据复选框值隐藏/显示元素

Question

我正在使用一个使用 Pug 模板的 NodeJS 应用程序。 我有一个复选框，我想将其用作隐藏/显示其他元素的切换开关。

我在 Jade/Pug 中找不到这样做的方法。

这就是我所拥有的：

form(method='POST')
    .form-group.row
      label(class='lbl', for='ishidden') Test
      .col-md-8
        input#isHidden(type='checkbox', name="ishidden")
        if *checkbox_checked*
          label(class='lbl') NotHidden

我试过了：

• 如果输入#isHidden
• 如果输入#isHidden.checked
• 如果#isHidden
• 如果#isHidden.checked
• 如果 {#isHidden}
• 如果 {#isHidden.checked}

渲染时它们都给我服务器错误。

我不知道接下来要尝试什么。 现在已经找了几个小时了，我找不到它。 我对前端有点陌生，对模板也很陌生，所以我很确定我做错了什么。

这会涉及一些内联脚本吗？

任何帮助将不胜感激。

谢谢！

Answer 1

Pug 擅长在服务器上快速呈现 HTML，但它不是客户端 JavaScript 引擎。

换句话说，如果您希望 pug 在每次用户单击复选框时更改页面，您需要将其发送回服务器以重新渲染。这不会很好地利用服务器资源，但更重要的是，它会带来非常糟糕的用户体验。

Pug 仍然是生成页面的好方法，但您需要使用客户端 JavaScript 以您想要的方式开始使用复选框。

Here is another question 将向您展示如何开始在客户端 JavaScript 中执行此操作，如果您搜索“JavaScript 复选框”，您会发现许多其他资源可以进一步帮助您。