title: How to get the checked atribute of a checkbox with javascript
body: <p>I'm following this tutorial on inline editing, <a href="http://www.datatables.net/blog/Inline_editing" rel="nofollow">http://www.datatables.net/blog/Inline_editing</a>.</p>
  
  <p>Now I come up with problem, I'm trying to edit checkboxes and I'm not getting there. </p>
  
  <p>I simply replaced inputs of type text with checkbox, but I guess there's more to it. So my question is, how can I read the checked attribute of a checkbox?</p>
  
  <p>This is my code</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
      function restoreRow(oTable, nRow) {
          var aData = oTable.fnGetData(nRow);
          var jqTds = $('&gt;td', nRow);
  
          for (var i = 0, iLen = jqTds.length; i &lt; iLen; i++) {
              oTable.fnUpdate(aData[i], nRow, i, false);
          }
  
          oTable.fnDraw();
      }
  
      function editRow(oTable, nRow) {
          var aData = oTable.fnGetData(nRow);
          var jqTds = $('&gt;td', nRow);
          jqTds[0].innerHTML = '&lt;input type="text" value="' + aData[0] + '"&gt;';
          jqTds[1].innerHTML = '&lt;input type="text" value="' + aData[1] + '"&gt;';
          jqTds[2].innerHTML = '&lt;input type="checkbox" value="' + aData[2] + '"&gt;';
          jqTds[3].innerHTML = '&lt;a class="edit" href=""&gt;Save&lt;/a&gt;';
  
      }
  
      function saveRow(oTable, nRow) {
          var jqInputs = $('input', nRow);
          oTable.fnUpdate(jqInputs[0].value, nRow, 0, false);
          oTable.fnUpdate(jqInputs[1].value, nRow, 1, false);
          oTable.fnUpdate('&lt;input type="checkbox" checked="' + jqInputs[2].value + '"&gt;', nRow, 2, false);
          oTable.fnUpdate('&lt;a class="edit" href=""&gt;Edit&lt;/a&gt;', nRow, 3, false);
          oTable.fnDraw();
      }
  
      $(document).ready(function () {
          var oTable = $('#tbl').dataTable();
          var nEditing = null;
  
          $('#new').click(function (e) {
              e.preventDefault();
  
              var aiNew = oTable.fnAddData(['', '', '',
              '&lt;a class="edit" href=""&gt;Edit&lt;/a&gt;', '&lt;a class="delete" href=""&gt;Delete&lt;/a&gt;']);
              var nRow = oTable.fnGetNodes(aiNew[0]);
              editRow(oTable, nRow);
              nEditing = nRow;
          });
  
          $('#tbl a.delete').live('click', function (e) {
              e.preventDefault();
  
              var nRow = $(this).parents('tr')[0];
              oTable.fnDeleteRow(nRow);
          });
  
          $('#tbl a.edit').live('click', function (e) {
              e.preventDefault();
  
              /* Get the row as a parent of the link that was clicked on */
              var nRow = $(this).parents('tr')[0];
  
              if (nEditing !== null &amp;&amp; nEditing != nRow) {
                  /* Currently editing - but not this row - restore the old before continuing to edit mode */
                  restoreRow(oTable, nEditing);
                  editRow(oTable, nRow);
                  nEditing = nRow;
              }
              else if (nEditing == nRow &amp;&amp; this.innerHTML == "Save") {
                  /* Editing this row and want to save it */
                  saveRow(oTable, nEditing);
                  nEditing = null;
              }
              else {
                  /* No edit in progress - let's start one */
                  editRow(oTable, nRow);
                  nEditing = nRow;
              }
          });
      });
  </code></pre>
  
  <p>And this is my table</p>
  
  <pre><code>&lt;p&gt;
                      &lt;a id="new" href=""&gt;Add new row&lt;/a&gt;&lt;/p&gt;
                  &lt;table cellpadding="0" cellspacing="0" border="0" class="tbl" id="tbl"&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th&gt;
                                  Name
                              &lt;/th&gt;
                              &lt;th&gt;
                                  Description
                              &lt;/th&gt;
                              &lt;th&gt;
                                  Sample
                              &lt;/th&gt;
                              &lt;th&gt;
                              &lt;/th&gt;
                              &lt;th&gt;
                              &lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                          @if (Model != null)
                          {
                              foreach (var item in Model.TestFields)
                              { 
                              &lt;tr&gt;
                                  &lt;td&gt;
                                      @Truncate(item.Name, 20)
                                  &lt;/td&gt;
                                  &lt;td&gt;
                                      @Truncate(item.Description, 20)
                                  &lt;/td&gt;
                                  &lt;td&gt;
                                      @Html.CheckBoxFor(i =&gt; item.Sample)
                                  &lt;/td&gt;
                                  &lt;td&gt;
                                      &lt;a class="edit" href=""&gt;Edit&lt;/a&gt;
                                  &lt;/td&gt;
                                  &lt;td&gt;
                                      &lt;a class="delete" href=""&gt;Delete&lt;/a&gt;
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                              }
                          }
                      &lt;/tbody&gt;
                  &lt;/table&gt;
  </code></pre>