2017-04-05 29 views
0

我想統計複選框被選中的所有行。我已經試圖計算檢查行,但沒有成功:HTML表查找所有使用jQuery檢查過的行

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>

+0

ID應該是唯一的! –

+0

'var checkedRows = $(「#tblProductsBeforeInsert input [type ='checkbox']:checked」)。closest(「tr」);'! –

回答

1

這是太簡單了,下面使用。

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

這會給你所有選中的複選框的計數。

2

使用:檢查選擇。 有一個在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>