Swizec Teller - a geek with a hatswizec.com

    Using Backbone to improve multiselects

    Sometimes you need to ask a users for multiple answers to a single question. But what's the best way to go about it?


    A multiselect input field is kind of strange for the user, sticks out and doesn't really behave like everything else on the web.

    A bunch of checkboxes is better for the user ... but have you ever tried handling a form with dynamically created checkboxes? Let alone creating useful tests and consolidating everything into a single list of values. No decent forms framework will let you do that easily.

    I had to solve this similar problem for a time and attendance software I worked on, so I made a Javascript thing to convert a select field into a checkbox-field. Then I made it into a simple jquery plugin thing for everyone to use :)

    Check out the demo!

    The idea is pretty simple:

    • take a select, turn it into a list of options
    • every option becomes a Checkbox model in a collection
    • render each Checkbox as a CheckboxView
    • connect everything with some events

    What I really love about the Backbone approach is that all of this works almost magically. Instead of bending over backwards to get checkboxes and the hidden multiselect synced up, all I had to do was create some models, some views and tell them how they are connected.

    This is how the field itself is created

    $multiselect.find("option").each(function (i, el) {
    var $el = $(el);
    // hidden behind the scenes here is that:
    // 1. creating a Checkbox, correctly binds together all needed events
    // 2. adding it to checkboxes, takes care of rendering and adding to the DOM
    new Checkbox({
    value: $el.val(),
    label: $el.html(),
    selected: $el.attr("selected"),

    And to make sure data is synced up between its three representations (multiselect, visual checkboxes, the data structure itself), all it takes is this:

    var Checkbox = Backbone.Model.extend({
    initialize: function () {
    this.bind("change:selected", this.toggled);
    this.attributes.id = this.cid;
    toggled: function () {
    var $opt = $multiselect.find("option[value=" + this.get("value") + "]");
    if (this.get("selected")) {
    $opt.attr("selected", "1");
    } else {

    Yep, that's the whole model and that's all it takes to sync everything up. Pretty cool huh? I remember trying to do this with just jQuery once ... I nearly stabbed my eyes out to end the misery.

    All in all the whole thing is just 123 sloc, which can only mean one thing: Backbone is cool.

    If you use my checkbox-field library, it's only going to be a single sloc for you:


    That's it :)

    Let me know what you think.

    Enhanced by Zemanta

    Did you enjoy this article?

    Published on April 13th, 2012 in Checkbox, HTML, JavaScript, jQuery, Languages, Programming, Scripts, Uncategorized, User interface

    Learned something new?
    Want to become an expert?

    Here's how it works 👇

    Leave your email and I'll send you thoughtfully written emails every week about React, JavaScript, and your career. Lessons learned over 20 years in the industry working with companies ranging from tiny startups to Fortune5 behemoths.

    Join Swizec's Newsletter

    And get thoughtful letters 💌 on mindsets, tactics, and technical skills for your career. Real lessons from building production software. No bullshit.

    "Man, love your simple writing! Yours is the only newsletter I open and only blog that I give a fuck to read & scroll till the end. And wow always take away lessons with me. Inspiring! And very relatable. 👌"

    ~ Ashish Kumar

    Join over 14,000 engineers just like you already improving their careers with my letters, workshops, courses, and talks. ✌️

    Have a burning question that you think I can answer? I don't have all of the answers, but I have some! Hit me up on twitter or book a 30min ama for in-depth help.

    Ready to Stop copy pasting D3 examples and create data visualizations of your own?  Learn how to build scalable dataviz components your whole team can understand with React for Data Visualization

    Curious about Serverless and the modern backend? Check out Serverless Handbook, modern backend for the frontend engineer.

    Ready to learn how it all fits together and build a modern webapp from scratch? Learn how to launch a webapp and make your first 💰 on the side with ServerlessReact.Dev

    Want to brush up on your modern JavaScript syntax? Check out my interactive cheatsheet: es6cheatsheet.com

    By the way, just in case no one has told you it yet today: I love and appreciate you for who you are ❤️

    Created by Swizec with ❤️