表格行中已选中复选框的总和?

时间:2017-07-07 13:49:22

标签: jquery checkbox

我正在寻找解决方案,如何动态计算表格行中已选中的复选框,并将已检查的总和传递给另一个单元格。 有我的例子:

<table>
  <thead>
    <tr>
      <th class='ptak'>X</th>
      <th class='ptak'>X</th>
      <th class='ptak'>X</th>
      <th class='ptak'>X</th>
      <th class='ptak'>X</th>
      <th class='ptak'>X</th>
      <th class='ptak'>X</th>
      <th class='ptak'>X</th>
      <th class='ptak'>X</th>
      <th class='ptak'>X</th>
      <th class='ptak'>Counter</th>
      <th class='up'>Time</th>
      <th class='name'>Match</th>
    </tr>
  </thead>
  <tr>
    <td class='a'>
      <div><input type='checkbox' name='chkboxarray' class='ptaszek'></div>
    </td>
    <td class='b'>
      <div><input type='checkbox' name='chkboxarray' class='ptaszek'></div>
    </td>
    <td class='c'>
      <div><input type='checkbox' name='chkboxarray' class='ptaszek'></div>
    </td>
    <td class='d'>
      <div><input type='checkbox' name='chkboxarray' class='ptaszek'></div>
    </td>
    <td class='e'>
      <div><input type='checkbox' name='chkboxarray' class='ptaszek'></div>
    </td>
    <td class='f'>
      <div><input type='checkbox' name='chkboxarray' class='ptaszek'></div>
    </td>
    <td class='g'>
      <div><input type='checkbox' name='chkboxarray' class='ptaszek'></div>
    </td>
    <td class='h'>
      <div><input type='checkbox' name='chkboxarray' class='ptaszek'></div>
    </td>
    <td class='i'>
      <div><input type='checkbox' name='chkboxarray' class='ptaszek'></div>
    </td>
    <td class='j'>
      <div><input type='checkbox' name='chkboxarray' class='ptaszek'></div>
    </td>
    <td style="text-align: center;">0</td>
    <td class='up'><span class="table-matches__time">02:00</span></td>
    <td class='up'>River Plate Ecuador vs Delfin</td>
  </tr>
  <tr>
    <td class='a'>
      <div><input type='checkbox' name='chkboxarray' class='ptaszek'></div>
    </td>
    <td class='b'>
      <div><input type='checkbox' name='chkboxarray' class='ptaszek'></div>
    </td>
    <td class='c'>
      <div><input type='checkbox' name='chkboxarray' class='ptaszek'></div>
    </td>
    <td class='d'>
      <div><input type='checkbox' name='chkboxarray' class='ptaszek'></div>
    </td>
    <td class='e'>
      <div><input type='checkbox' name='chkboxarray' class='ptaszek'></div>
    </td>
    <td class='f'>
      <div><input type='checkbox' name='chkboxarray' class='ptaszek'></div>
    </td>
    <td class='g'>
      <div><input type='checkbox' name='chkboxarray' class='ptaszek'></div>
    </td>
    <td class='h'>
      <div><input type='checkbox' name='chkboxarray' class='ptaszek'></div>
    </td>
    <td class='i'>
      <div><input type='checkbox' name='chkboxarray' class='ptaszek'></div>
    </td>
    <td class='j'>
      <div><input type='checkbox' name='chkboxarray' class='ptaszek'></div>
    </td>
    <td style="text-align: center;">0</td>
    <td class='up'><span class="table-matches__time">05:00</span></td>
    <td class='up'>Warriors vs Home United</td>
  </tr>
</table>

我每行有10个复选框和“计数器”单元格。 不知道如何分隔行中的复选框。

我找到了这个解决方案,但它无法在任何地方工作:

function submitFunction() {
  alert("call countchecks");
  countChecks();
  alert("checkedsizes populated");
  alert("continue with submit");
}

function countChecks() {
  $('.authors-list tr').each(function() {
    var count = 0;
    var hdn = $(this).find('input[name^="checkedsizes"]');
    count = $(this).find(':checkbox:checked').length;
    hdn.val(count);
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="authors-list">
  <tr>
    <td><input type="text" id="product1" name="product1" class="rounded" value="product1" /></td>
    <td><input type="text" id="qty1" value='15' name="qty1" class="rounded" /></td>
    <td class="tdcheckbox"><input type="checkbox" id="h09_1" name="h09_1" class="rounded" /></td>
    <td class="tdcheckbox"><input type="checkbox" id="h12_1" name="h12_1" class="rounded" /></td>
    <td class="tdcheckbox"><input type="checkbox" id="h15_1" name="h15_1" class="rounded" /></td>
    <td class="tdcheckbox"><input type="checkbox" id="h18_1" name="h18_1" class="rounded" /></td>
    <td class="tdcheckbox"><input type="checkbox" id="h21_1" name="h21_1" class="rounded" /></td>
    <td class="tdcheckbox"><input type="checkbox" id="h24_1" name="h24_1" class="rounded" /></td>
    <td class="tdcheckbox"><input type="checkbox" id="h27_1" name="h27_1" class="rounded" /></td>
    <td class="tdcheckbox"><input type="checkbox" id="h30_1" name="h30_1" class="rounded" /></td>
    <td><input type="text" name="checkedsizes_1" id="checkedsizes_1" value="0" /></td>
  </tr>
  <tr>

    <td><input type="text" id="product2" name="product2" class="rounded" value="product2" /></td>
    <td><input type="text" id="qty2" value='15' name="qty2" class="rounded" /></td>
    <td class="tdcheckbox"><input type="checkbox" id="h09_2" name="h09_2" class="rounded" /></td>
    <td class="tdcheckbox"><input type="checkbox" id="h12_2" name="h12_2" class="rounded" /></td>
    <td class="tdcheckbox"><input type="checkbox" id="h15_2" name="h15_2" class="rounded" /></td>
    <td class="tdcheckbox"><input type="checkbox" id="h18_2" name="h18_2" class="rounded" /></td>
    <td class="tdcheckbox"><input type="checkbox" id="h21_2" name="h21_2" class="rounded" /></td>
    <td class="tdcheckbox"><input type="checkbox" id="h24_2" name="h24_2" class="rounded" /></td>
    <td class="tdcheckbox"><input type="checkbox" id="h27_2" name="h27_2" class="rounded" /></td>
    <td class="tdcheckbox"><input type="checkbox" id="h30_2" name="h30_2" class="rounded" /></td>
    <td><input type="text" name="checkedsizes_2" id="checkedsizes_2" value="0" size="5" /></td>
  </tr>
  <tr>

    <td><input type="text" id="product3" name="product3" class="rounded" value="product3" /></td>
    <td><input type="text" id="qty3" value='15' name="qty3" class="rounded" /></td>
    <td class="tdcheckbox"><input type="checkbox" id="h09_3" name="h09_3" class="rounded" /></td>
    <td class="tdcheckbox"><input type="checkbox" id="h12_3" name="h12_3" class="rounded" /></td>
    <td class="tdcheckbox"><input type="checkbox" id="h15_3" name="h15_3" class="rounded" /></td>
    <td class="tdcheckbox"><input type="checkbox" id="h18_3" name="h18_3" class="rounded" /></td>
    <td class="tdcheckbox"><input type="checkbox" id="h21_3" name="h21_3" class="rounded" /></td>
    <td class="tdcheckbox"><input type="checkbox" id="h24_3" name="h24_3" class="rounded" /></td>
    <td class="tdcheckbox"><input type="checkbox" id="h27_3" name="h27_3" class="rounded" /></td>
    <td class="tdcheckbox"><input type="checkbox" id="h30_3" name="h30_3" class="rounded" /></td>
    <td><input type="text" name="checkedsizes_3" id="checkedsizes_3" value="0" /></td>
  </tr>
</table>
<input type="button" value="continue" onclick="submitFunction()">

感谢您的关注。

0 个答案:

没有答案