CODEWITHSUNDEEP
javascriptjqueryhtml
Abrar Ali
Abrar Ali

Reputation: 115

Count number of checkboxes checked in a table column

I am now struggling with counting number of checkboxes checked in a column. I am trying to count them and display a total at the bottom. My html is as follows. There are alot more columns!

<tr>
    <th>Public Safety</th>
    <td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
    <td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
    <td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
    <td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
    <td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
    <td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
    <td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
    <td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
    <td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
    <td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
    <td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
    <td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
    <td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
    <td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
    <td></td>
</tr>
<tr>
    <th>SSW/MS</th>
    <td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
    <td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
    <td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
    <td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
    <td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
    <td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
    <td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
    <td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
    <td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
    <td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
    <td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
    <td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
    <td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
    <td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
    <td></td>
</tr>

And my jquery so far:

$('#tblRootCauseBody').on('change', 'input[type=checkbox]', function () {
    $(" #tblRootCauseBody tr:not(:last-child) td:nth-child("+ (that.closest('td').index() - 1) + ")").each(function () {
        $(this).html();
    });
});

Upvotes: 0

Views: 1469

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388326

To get the index of :nth-child()(index starts from 1), you need to add 1 to the value of .index()(starts from 0)

$('#tblRootCauseBody').on('change', 'input[type=checkbox]', function() {
  var index = $(this).closest('td').index() + 1,
    $checked = $(" #tblRootCauseBody tr:not(:last-child) td:nth-child(" + (index) + ") input:checked");
  $('#tblRootCauseBody tr:last-child > :nth-child(' + index + ')').text($checked.length);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody id="tblRootCauseBody">
    <tr>
      <th>Public Safety</th>
      <td>
        <div class="text-center">
          <label class="checkbox-inline">
            <input type="checkbox" class="chkRootCauseSummary" />
          </label>
        </div>
      </td>
      <td>
        <div class="text-center">
          <label class="checkbox-inline">
            <input type="checkbox" class="chkRootCauseSummary" />
          </label>
        </div>
      </td>
      <td>
        <div class="text-center">
          <label class="checkbox-inline">
            <input type="checkbox" class="chkRootCauseSummary" />
          </label>
        </div>
      </td>
      <td>
        <div class="text-center">
          <label class="checkbox-inline">
            <input type="checkbox" class="chkRootCauseSummary" />
          </label>
        </div>
      </td>
      <td>
        <div class="text-center">
          <label class="checkbox-inline">
            <input type="checkbox" class="chkRootCauseSummary" />
          </label>
        </div>
      </td>
      <td>
        <div class="text-center">
          <label class="checkbox-inline">
            <input type="checkbox" class="chkRootCauseSummary" />
          </label>
        </div>
      </td>
      <td>
        <div class="text-center">
          <label class="checkbox-inline">
            <input type="checkbox" class="chkRootCauseSummary" />
          </label>
        </div>
      </td>
      <td>
        <div class="text-center">
          <label class="checkbox-inline">
            <input type="checkbox" class="chkRootCauseSummary" />
          </label>
        </div>
      </td>
      <td>
        <div class="text-center">
          <label class="checkbox-inline">
            <input type="checkbox" class="chkRootCauseSummary" />
          </label>
        </div>
      </td>
      <td>
        <div class="text-center">
          <label class="checkbox-inline">
            <input type="checkbox" class="chkRootCauseSummary" />
          </label>
        </div>
      </td>
      <td>
        <div class="text-center">
          <label class="checkbox-inline">
            <input type="checkbox" class="chkRootCauseSummary" />
          </label>
        </div>
      </td>
      <td>
        <div class="text-center">
          <label class="checkbox-inline">
            <input type="checkbox" class="chkRootCauseSummary" />
          </label>
        </div>
      </td>
      <td>
        <div class="text-center">
          <label class="checkbox-inline">
            <input type="checkbox" class="chkRootCauseSummary" />
          </label>
        </div>
      </td>
      <td>
        <div class="text-center">
          <label class="checkbox-inline">
            <input type="checkbox" class="chkRootCauseSummary" />
          </label>
        </div>
      </td>
      <td></td>
    </tr>
    <tr>
      <th>SSW/MS</th>
      <td>
        <div class="text-center">
          <label class="checkbox-inline">
            <input type="checkbox" class="chkRootCauseSummary" />
          </label>
        </div>
      </td>
      <td>
        <div class="text-center">
          <label class="checkbox-inline">
            <input type="checkbox" class="chkRootCauseSummary" />
          </label>
        </div>
      </td>
      <td>
        <div class="text-center">
          <label class="checkbox-inline">
            <input type="checkbox" class="chkRootCauseSummary" />
          </label>
        </div>
      </td>
      <td>
        <div class="text-center">
          <label class="checkbox-inline">
            <input type="checkbox" class="chkRootCauseSummary" />
          </label>
        </div>
      </td>
      <td>
        <div class="text-center">
          <label class="checkbox-inline">
            <input type="checkbox" class="chkRootCauseSummary" />
          </label>
        </div>
      </td>
      <td>
        <div class="text-center">
          <label class="checkbox-inline">
            <input type="checkbox" class="chkRootCauseSummary" />
          </label>
        </div>
      </td>
      <td>
        <div class="text-center">
          <label class="checkbox-inline">
            <input type="checkbox" class="chkRootCauseSummary" />
          </label>
        </div>
      </td>
      <td>
        <div class="text-center">
          <label class="checkbox-inline">
            <input type="checkbox" class="chkRootCauseSummary" />
          </label>
        </div>
      </td>
      <td>
        <div class="text-center">
          <label class="checkbox-inline">
            <input type="checkbox" class="chkRootCauseSummary" />
          </label>
        </div>
      </td>
      <td>
        <div class="text-center">
          <label class="checkbox-inline">
            <input type="checkbox" class="chkRootCauseSummary" />
          </label>
        </div>
      </td>
      <td>
        <div class="text-center">
          <label class="checkbox-inline">
            <input type="checkbox" class="chkRootCauseSummary" />
          </label>
        </div>
      </td>
      <td>
        <div class="text-center">
          <label class="checkbox-inline">
            <input type="checkbox" class="chkRootCauseSummary" />
          </label>
        </div>
      </td>
      <td>
        <div class="text-center">
          <label class="checkbox-inline">
            <input type="checkbox" class="chkRootCauseSummary" />
          </label>
        </div>
      </td>
      <td>
        <div class="text-center">
          <label class="checkbox-inline">
            <input type="checkbox" class="chkRootCauseSummary" />
          </label>
        </div>
      </td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

Upvotes: 2

Related Questions