javascript - 计算每列jquery js中的选中复选框

Question

我发现这个漂亮的代码对我的任务来说几乎是完美的，但我需要计算列而不是行。

https://codepen.io/b00stup/pen/dzGYPW

$.each(attendance, function(name, days) {
    var studentRow = $('tbody .name-col:contains("' + name + '")').parent('tr'),
        dayChecks = $(studentRow).children('.attend-col').children('input');

    dayChecks.each(function(i) {
        $(this).prop('checked', days[i]);
    });
});

有人知道如何更改 js 来计算列而不是行吗？

标签： javascriptjqueryhtml

Answer 1

您可以执行以下操作：

$('input[type="checkbox"]').change(function() {                        //Add event listener on checkboxes

  var result = [];                                                     //Init the result variable
  $('.student').each(function() {                                      //Select the row ( class stunden ) and loop
    $(this).find('input[type="checkbox"]').each(function(i) {          //Find all checkbox on a row and loop
      result[i] = result[i] || 0;                                      //Init if index does not exist
      result[i] += this.checked;                                       // +1 if checked
    })
  })

  console.log( JSON.stringify( result ) );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1>Udacity Attendance</h1>

<table>
  <thead>
    <tr>
      <th class="name-col">Student Name</th>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
      <th>6</th>
      <th>7</th>
      <th>8</th>
      <th>9</th>
      <th>10</th>
      <th>11</th>
      <th>12</th>
      <th class="missed-col">Days Missed-col</th>
    </tr>
  </thead>
  <tbody>
    <tr class="student">
      <td class="name-col">Slappy the Frog</td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="missed-col">0</td>
    </tr>
    <tr class="student">
      <td class="name-col">Lilly the Lizard</td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="missed-col">0</td>
    </tr>
    <tr class="student">
      <td class="name-col">Paulrus the Walrus</td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="missed-col">0</td>
    </tr>
    <tr class="student">
      <td class="name-col">Gregory the Goat</td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="missed-col">0</td>
    </tr>
    <tr class="student">
      <td class="name-col">Adam the Anaconda</td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="missed-col">0</td>
    </tr>
  </tbody>
</table>