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仍然是制作页面的好方法，但您需要使用客户端JavaScript以您希望的方式开始使用复选框。

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