A simple javascript thing that turns ugly multiselects into shiny checkbox fields, using Backbone, Handlebars and jQuery.

Finally a way to select multiple things that users can understand and you can easily work with!

View on Github »

Vanilla multiselect

A multiselect field is the most confusing HTML widget ever envisioned. Everybody gets confused by them.

Many checkboxes

A bunch of checkboxes look better, but they are difficult for the backend developer to handle.


Combining the two gives us the best of both worlds. Users see a field of checkboxes and they are submitted as a single form field.

How to Use

Using checkbox-field is just calling a function! Or you can customise it a little bit.


// there are also some options
    // a handlebars template for the checkboxes (default: #checkbox-template)
    template: "#checkbox-template",

    // placeholder for checkboxes (default: one is created)
    checkboxes: null,

    // hide the original multiselect or not (default: yup)
    hide: true

    // display "select all" (default: true)
    show_select_all: true

    // labels for select_all control
    select_all: "Select all",
    deselect_all: "Deselect all"


  1. Download checkbox-field
  2. Get Backbone
  3. Get Handlebars
  4. Insert this HTML somewhere
    <div id="checkbox-template"
      <div style="display:inline-block">
        <input type="checkbox"
               id="checkbox_{{id}}" />
        <label for="checkbox_{{id}}">
  5. That's it! Ready to use :)