как посчитать чекбосы в колонке таблицы и записать значения в value у input

Рейтинг: 0Ответов: 1Опубликовано: 27.01.2023

мне необходимо подсчитывать количество чекбоксов в колонке и выводить их в value у input

Ответы

▲ 0

Вот так это можно сделать

var nulls = document.getElementsByClassName("checkbox");
[...nulls].forEach(function (el) {
  el.value = 0;
});


$("#tblRootCauseBody").on("change", "input[type=checkbox]", function () {
  var index = $(this).closest("td").index() - 1;
  var znak = this.checked ? 1 : -1
  if (index) {
    nulls[index - 1].value = Number(nulls[index - 1].value) + znak;
  } else {
    [...nulls].forEach(e => e.value = Number(e.value) - 1)
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table" id="tblRootCauseBody">
        <thead>
          <tr>
            <th>Name</th>
            <th>Not done</th>
            <th>Param1</th>
            <th>Param2</th>
            <th>Param3</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Reeves</td>
            <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>


          </tr>
          <tr>
            <td>Reeves</td>
            <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>


          </tr>
          <tr>
            <td>Reeves</td>
            <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>

          </tr>
          <tr>
            <td>Reeves</td>
            <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>

          </tr>
          <tr>
            <td>Reeves</td>
            <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>

          </tr>
          <tr>
            <td>Reeves</td>
            <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>

          </tr>
          <tr>
    <td>Count checked</td>
    <TD></TD>
    <td class="count_cheked" bgcolor="#CCCCCC">
      <input name="{TOTAL_SW}" id="TOTAL_SW" type="text" size="10"
                                                      maxlength="2" value="" class="checkbox"/>
        <label class="btn" for="modal-TOTAL_SW" data-field="TOTAL_SW">
            <div id="error-TOTAL_SW" class="divError"><span title="Input rules">?</span></div>
        </label></td>
    <td class="count_cheked" bgcolor="#CCCCCC">
      <input name="{TOTAL_P}" id="TOTAL_P" type="text" size="10" maxlength="2"
                                                      value="" class="checkbox"/>
        <label class="btn" for="modal-TOTAL_P" data-field="TOTAL_P]">
            <div id="error-TOTAL_L" class="divError"><span title="Input rules">?</span></div>
        </label></td>
    <td class="count_cheked" bgcolor="#CCCCCC">
      <input name="{TOTAL_L}" id="TOTAL_L" type="text" size="10" maxlength="2"
                                                      value="" class="checkbox"/>
        <label class="btn" for="modal-TOTAL_L" data-field="TOTAL_L">
            <div id="error-TOTAL_L" class="divError"><span title="Input rules">?</span></div>
        </label></td>
</tr>
        </tbody>
      </table>