javascript - bootstrap + jade checkbox - Stack Overflow

admin管理员组

文章数量:1292301

Folks, Im quite new to jade and bootstrap. Creating a simple form, which has dropdowns and checkboxes.

Right now my code looks as follows:

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

Questions: 1.) Checkbox name, whats the proper syntax to label it? 2.) How to make the form more dynamic? Ie, if a checkbox is clicked or a dropdown is selected, another would appear?

Thanks

Folks, Im quite new to jade and bootstrap. Creating a simple form, which has dropdowns and checkboxes.

Right now my code looks as follows:

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

Questions: 1.) Checkbox name, whats the proper syntax to label it? 2.) How to make the form more dynamic? Ie, if a checkbox is clicked or a dropdown is selected, another would appear?

Thanks

• javascript
• node.js
• twitter-bootstrap-3
• pug

Share Improve this question Follow asked Dec 31, 2013 at 1:49 CmagCmag 15.8k2525 gold badges9797 silver badges146146 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

Unfortunately, in order to make it dynamic, you can't do it in Jade. You would have to rely on jQuery or other front-end libraries to handle that.

I label my Checkbox like this:

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

If I want to set default values from the server:

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

The following works: (bootstrap3)

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

If you're using angular this works fine

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

本文标签： javascriptbootstrapjade checkboxStack Overflow