javascript - HTML 表使用 jQuery 查找所有选中的行

Question

我想计算选中复选框的所有行。我已经尝试计算已检查的行数，但没有成功:

   var lenChecked = $("#tblProductsBeforeInsert")
.find('tbody > tr > td[id=cPROD_NME]').find("#chkPROD_NME");

我不知道如何在 checkbox 上使用属性 checked。

这是片段:

$("#btn1").click(function(){
  debugger;
  var len = $("#tblProductsBeforeInsert").find('tbody > tr').length;
     var lenChecked = $("#tblProductsBeforeInsert").find('tbody > tr > td[id=cPROD_NME]').find("#chkPROD_NME");
  
  $("#tblProductsBeforeInsert").find('tbody tr').each(function (i, el) {
    debugger;
    var row = $(this);        
    });  
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tblProductsBeforeInsert" class="table table-hover table-bordered">
  <thead>
    <tr>
      <th>Št.</th>
      <th>Ime izdelka</th>
      <th>Ident</th>
      <th>Količina</th>
      <th>Ime paketa / seta</th>
    </tr>
  </thead>
  <tbody>
      <tr iprod_key="120044295" iprod_key_sub="130001534">
        <td id="iROW_NUMBER">1</td>
        <td id="cPROD_NME"><input id="chkPROD_NME" type="checkbox" style="position:relative;top:2px;margin-right:5px;" checked="">AMOKSIKLAV VIALA 5X1,2G</td>
        <td id="cArticleId">000115</td>
        <td id="decQuantity">
          <input id="inputPRCO_QUA" type="text" style="width:50px;" value="1">&nbsp;<span style="position:relative;top:3px;font-size:20px;">/</span>
          <input id="inputPRCO_QDE" type="text" style="width:50px;" value="1">&nbsp;kos
        </td>
        <td id="cPROD_NME_SUB">Paket - Amoksiklav</td>
        <td id="cUNIT_BASIC" style="display:none;">KO</td>
        <td id="cUNIT_ALTER" style="display:none;">SC</td>
      </tr>
      <tr iprod_key="120047244" iprod_key_sub="130001534">
        <td id="iROW_NUMBER">2</td>
        <td id="cPROD_NME"><input id="chkPROD_NME" type="checkbox" style="position:relative;top:2px;margin-right:5px;" checked="">KANILA PRETOČNA MAJHNA   40100</td>
        <td id="cArticleId">121311</td>
        <td id="decQuantity">
          <input id="inputPRCO_QUA" type="text" style="width:50px;" value="1">&nbsp;<span style="position:relative;top:3px;font-size:20px;">/</span>
          <input id="inputPRCO_QDE" type="text" style="width:50px;" value="1">&nbsp;kos
        </td>
        <td id="cPROD_NME_SUB">Paket - Amoksiklav</td>
        <td id="cUNIT_BASIC" style="display:none;">KO</td>
        <td id="cUNIT_ALTER" style="display:none;">ZA</td>
      </tr>
      <tr iprod_key="120063937" iprod_key_sub="130001534">
        <td id="iROW_NUMBER">3</td>
        <td id="cPROD_NME"><input id="chkPROD_NME" type="checkbox" style="position:relative;top:2px;margin-right:5px;" checked="">NACL 0,9% 100ML PLAST.</td>
        <td id="cArticleId">004494</td>
        <td id="decQuantity">
          <input id="inputPRCO_QUA" type="text" style="width:50px;" value="1">&nbsp;<span style="position:relative;top:3px;font-size:20px;">/</span>
          <input id="inputPRCO_QDE" type="text" style="width:50px;" value="1">&nbsp;kos
        </td>
        <td id="cPROD_NME_SUB">Paket - Amoksiklav</td>
        <td id="cUNIT_BASIC" style="display:none;">KO</td>
        <td id="cUNIT_ALTER" style="display:none;"></td>
      </tr>
      <tr iprod_key="120054232" iprod_key_sub="130001534">
        <td id="iROW_NUMBER">4</td>
        <td id="cPROD_NME"><input id="chkPROD_NME" type="checkbox" style="position:relative;top:2px;margin-right:5px;" checked="">ROBČKI ALKOHOLNI VELIKI, 90X45MM A100 PDI</td>
        <td id="cArticleId">230173</td>
        <td id="decQuantity">
          <input id="inputPRCO_QUA" type="text" style="width:50px;" value="2">&nbsp;<span style="position:relative;top:3px;font-size:20px;">/</span>
          <input id="inputPRCO_QDE" type="text" style="width:50px;" value="1">&nbsp;kos
        </td>
        <td id="cPROD_NME_SUB">Paket - Amoksiklav</td>
        <td id="cUNIT_BASIC" style="display:none;">KO</td>
        <td id="cUNIT_ALTER" style="display:none;">KA</td>
      </tr>
      <tr iprod_key="120070367" iprod_key_sub="130001534">
        <td id="iROW_NUMBER">5</td>
        <td id="cPROD_NME"><input id="chkPROD_NME" type="checkbox" style="position:relative;top:2px;margin-right:5px;" checked="">SISTEM INFUZIJSKI INTRAFIX SAFESET BASIC 180CM</td>
        <td id="cArticleId">169500</td>
        <td id="decQuantity">
          <input id="inputPRCO_QUA" type="text" style="width:50px;" value="2">&nbsp;<span style="position:relative;top:3px;font-size:20px;">/</span>
          <input id="inputPRCO_QDE" type="text" style="width:50px;" value="1">&nbsp;kos
        </td>
        <td id="cPROD_NME_SUB">Paket - Amoksiklav</td>
        <td id="cUNIT_BASIC" style="display:none;">KO</td>
        <td id="cUNIT_ALTER" style="display:none;">SC</td>
      </tr>
  </tbody>
</table>

<br/>
<button id="btn1">Iterate</button>

Answer 1

使用 :checked 选择器。jQuery api 中有一个例子: https://api.jquery.com/checked-selector/

<script>
var countChecked = function() {
  var n = $( "input:checked" ).length;
  $( "div" ).text( n + (n === 1 ? " is" : " are") + " checked!" );
};
countChecked();

$( "input[type=checkbox]" ).on( "click", countChecked );
</script>