哈巴狗/翡翠，根据复选框值隐藏/显示元素

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复选框”，则会发现许多其他资源，它们将为您提供进一步的帮助。