title: How to data-bind checkbox value to Javascript object
body: <p>I am trying to set up 2-way data binding in Javascript for a simple form. I have been using the <a href="https://github.com/grnadav/databind" rel="nofollow">databind</a> plugin by grnadav, but have been unable to get a (or multiple) checkbox values to bind to an object array. The data model, js binding and test output function are</p>
  
  <pre><code>// DataBind model
  var model = {
    title: 'sample',
    cb: ['option', 'option', 'option']
  }
  
  // bind form
  window.onload = function() {
  
    DataBind.bind( document.getElementById('form'), model );
  
  };
  
  // log data values
  function sendForm(){
    console.log(JSON.stringify(model));
    document.getElementById('data').innerHTML = JSON.stringify(model);
  }
  </code></pre>
  
  <p>The HTML markup is</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Checkbox Test&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;table id="form"&gt;
      &lt;tr&gt;
        &lt;td&gt;Input&lt;/td&gt;
        &lt;td&gt;&lt;input id="title" data-key="title"&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Checkboxes&lt;/td&gt;
        &lt;td&gt;
          &lt;input name="checkbox-group" data-key="cb[0]" id="in-checkbox1" value="one" type="checkbox"/&gt;
          &lt;input name="checkbox-group" data-key="cb[1]" id="in-checkbox2" value="two" type="checkbox"/&gt;
          &lt;input name="checkbox-group" data-key="cb[2]" id="in-checkbox3" value="three" type="checkbox"/&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;pre id="data"&gt;&lt;/pre&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td colspan="2"&gt;&lt;input type="Button" name="Submit" value="Continue" onclick="sendForm()"&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  
    &lt;script src="DataBind.js"&gt;&lt;/script&gt;
      ...
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>