1

I am working with a NodeJS app that uses Pug templates. I have a checkbox that I want to use as a toggle for hiding/showing other elements.

I can't find the way to do this in Jade/Pug.

This is what I have:

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

I've tried with:

  • if input#isHidden
  • if input#isHidden.checked
  • if #isHidden
  • if #isHidden.checked
  • if {#isHidden}
  • if {#isHidden.checked}

All of them give me server error when rendering.

I have no clue what to try next. Been searching for a couple hours now and I can't find it. I am kinda new for front end and very new to templating so I am pretty sure I am doing something horribly wrong.

Will this involve some inline scripting?

Any help will be greatly appreciated.

Thanks!

user3508891
  • 28
  • 5

1 Answers1

1

Pug is great at rendering HTML quickly on the server, but it's not a client-side JavaScript engine.

In other words, if you want pug to change the page every time the user clicks in a checkbox you'll need to send it back to the server for re-rendering. That wouldn't be a very good use of server resources, but more importantly it would be a very poor user experience.

Pug is still a great way to produce your page, but you need to use client-side JavaScript to start working with the checkboxes in the way you want.

Here is another question that will show you how to get started doing this in client-side JavaScript, if you search for "JavaScript checkbox" you'll find a lot of other resources that will help you further.

Graham
  • 7,431
  • 18
  • 59
  • 84