HTML表使用jQuery查找所有已检查的行

时间:2017-04-05 13:17:00

标签: javascript jquery

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

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

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

这是片段:

$("#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>

2 个答案:

答案 0 :(得分:2)

使用: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>

答案 1 :(得分:1)

这太容易了,请在下面使用。

$("#tblProductsBeforeInsert input:checked").length;

这将为您提供所有选中复选框的计数。

相关问题