Unable to show a checkbox using Jade and Node

Question

Trying to do a checkbox to select Male or Female.

Code to show the CheckBox is as follows;

span(style='display:block;')
    div.
        Sex:
    input(type='radio',id='Male',name='sex',value='Male')
        Male
    input(type='radio',id='Female',name='sex',value='Female')
        Female  

However when The page is shown I get the following;

**28| Sex:
29| input(type='radio',id='Male',name='sex',value='Male')
> 30| 'Male'
31| input(type='radio',id='Female',name='sex',value='Female')
32|
33|

name is not defined 28| Sex: 29| input(type='radio',id='Male',name='sex',value='Male')

30| 'Male' 31| input(type='radio',id='Female',name='sex',value='Female') 32| 33|**

How can you show a checkbox using Jade with two options 'Male' & 'Female'

(I have tried putting a '.' after the input line, and tried putting Male into both single and double quotes).

Answer 1

Your problem is that you are not allowed to shift into a self closing tag and also you get an error because of not piping your "labels", so Jade thinks they are vars.

Please try this:

span(style='display:block;')
    div
        | Sex:
        input(type='radio',id='Male',name='sex',value='Male')
        | Male
        input(type='radio',id='Female',name='sex',value='Female')
        | Female 

To produce this HTML: as JSFiddle

<span style="display:block;">
  <div>Sex:
    <input type="radio" id="Male" name="sex" value="Male"/>Male
    <input type="radio" id="Female" name="sex" value="Female"/>Female 
  </div>
</span>

Answer 2

Try this

span(style='display:block;')
    div
        p Sex:
        label
            input(type='radio',id='Male',name='sex',value='Male')
                | Male
        label
            input(type='radio',id='Female',name='sex',value='Female')
                | Female