Bootstrap + Jade 多选框

Question

大家好，我对jade和bootstrap都很新手。正在创建一个简单的表单，其中包含下拉选项和复选框。

现在我的代码如下：

form(role="search",action='/uri/blah' method='post').navbar-form.navbar-left
    .form-group 
        input(type="name", name="bae", placeholder="bae", required).form-control
        select(id="type",name="type").form-control
            option(value="foo") foo
            option(value="bar") bar
            option(value="baz") baz
        input(type="text", name="X", placeholder="X", required).form-control
        input(type="checkbox", name="checkboxname", text="asdf").form-control
    p           
    button(type="submit").btn.btn-default Submit

问题： 1.) 复选框名称，正确的语法如何标记？ 2.) 如何使表单更加动态？例如，如果单击复选框或选择下拉菜单，则会出现另一个菜单？

谢谢。

- Cmag

Answer 1

很遗憾，为了使其具有动态性，您不能在Jade中完成此操作。您需要依靠jQuery或其他前端库来处理。

我这样标记我的复选框：

label(for="checkbox")
  input(type="checkbox", name="checkboxname", value="value").form-control
  | Checkbox Label Goes Here

如果我想从服务器设置默认值：

label(for="checkbox")
  input(type="checkbox", name="checkboxname", value="value" checked=data.checked?"checked":undefined).form-control
  | Checkbox Label Goes Here

- tpae

---

然而，p标签后的 | content 必须缩进，但这里没有？这很令人困惑。 - cbmtrx

Answer 2

以下内容适用于（bootstrap3）：

.checkbox
    label
    input(type='checkbox', name='checkbox', value='test')
    |   check

- Cmag

Answer 3

如果你正在使用Angular，这个很好用

    input(type="checkbox", name="myCheckbox")
    label(translate="TRANSLATE_TEXT", for="myCheckbox")

- ed209