僅當表格複選框「已檢查」時才獲取表格行

Question

我正在使用以下代碼使用checkbox class = btnSelect檢索所選行的值。

我只想在checkbox被標記爲選中時獲得行。

當前代碼獲取值，當checkbox被選中和未選中。

爲什麼下面的代碼在複選框被選中或未選中時會得到值？

$("#itemtable").on('click', '.btnSelect', function() { 
    // get the current row 
    alert("i am inside dddd"); 
    var currentRow = $(this).closest("tr"); 

    var col1 = currentRow.find("td:eq(0)").text(); // get SI no from checkbox 
    var col2 = currentRow.find("td:eq(1)").text(); // get item name 
    var col3 = currentRow.find("td:eq(2)").text(); // get item code 
    var col4 = currentRow.find("td:eq(3)").text(); // get supplier 
    var col5 = currentRow.find("td:eq(4)").text(); // get received qty 
    var col6 = $(currentRow).find("td:eq(5) input[type='text']").val(); // get accepted qty 
    var col7 = $(currentRow).find("td:eq(6) input[type='text']").val(); // get rejected qty 
    var col8 = $(currentRow).find("td:eq(7) input[type='text']").val(); // get remarks 

    var data = col1 + "\n" + col2 + "\n" + col3 + "\n" + col4 + "\n" + col5 + "\n" + col6 + "\n" + col7 + "\n" + col8; 

    alert(data); 
}); 

[！[在這裏輸入的形象描述] [1] [1]

Answer 1

$(document).ready(function() { 
 
    $("#saverecord").click(function(event) { 
 
    //$("#itemtable").on('click', '.btnSelect', function() { 
 
    // get the current row 
 

 
    var currentRow = $(".btnSelect:checked").closest("tr"); 
 
    console.log(currentRow.index()) 
 
    var col1 = currentRow.find("td:eq(0)").text(); // get SI no from checkbox 
 
    var col2 = currentRow.find("td:eq(1)").text(); // get item name 
 
    var col3 = currentRow.find("td:eq(2)").text(); // get item code 
 
    var col4 = currentRow.find("td:eq(3)").text(); // get supplier 
 
    var col5 = currentRow.find("td:eq(4)").text(); // get received qty 
 
    var col6 = currentRow.find("td:eq(5)").text() 
 
    var col7 = currentRow.find("td:eq(6)").text() 
 
    var col8 = currentRow.find("td:eq(7)").text() 
 

 
    var data = col1 + "\n" + col2 + "\n" + col3 + "\n" + col4 + "\n" + col5 + "\n" + col6 + "\n" + col7 + "\n" + col8; 
 

 
    console.log(data); 
 

 

 

 

 

 
    }); 
 

 
    //}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="tablediv"> 
 
    <table cellspacing="0" id="itemtable" align="center"> 
 
    <tr> 
 
     <td><input type="checkbox" class="btnSelect" id="chk" name="chk" /></td> 
 
     <th scope="col"> SIno</th> 
 
     <th scope="col">Item name</th> 
 
     <th scope="col">Item code</th> 
 
     <th scope="col">Supplier</th> 
 
     <th scope="col">Received qty</th> 
 
     <th scope="col">Accepted qty</th> 
 
     <th scope="col">Rejected qty</th> 
 
     <th scope="col">Remarks</th> 
 
    </tr> 
 
    <tr> 
 
     <td><input type="checkbox" class="btnSelect" id="chk" name="chk" /></td> 
 
     <td> 1 </td> 
 
     <td> biscuit </td> 
 
     <td>e123</td> 
 
     <td>abc company</td> 
 
     <td>23</td> 
 
     <td>20</td> 
 
     <td>3</td> 
 
     <td>waste</td> 
 
    </tr> 
 
    <tr> 
 
     <td><input type="checkbox" class="btnSelect" id="chk" name="chk" /></td> 
 
     <td> 2 </td> 
 
     <td> chocolate </td> 
 
     <td>e526</td> 
 
     <td>xyz company</td> 
 
     <td>25</td> 
 
     <td>20</td> 
 
     <td>5</td> 
 
     <td>waste</td> 
 
    </tr> 
 
    </table> 
 
    <input type="button" value="Save the record" id="saverecord" class="button0"> 
 
</div>

不使用此背景下，因爲點擊事件是保存按鈕

Answer 2

您可以使用從DOM對象checked屬性。

對於〔實施例

$("#itemtable").on('click', '.btnSelect', function() { 
    if(this.checked){ 
     // get the current row 
     alert("i am inside dddd"); 
     var currentRow = $(this).closest("tr"); 

     var col1 = currentRow.find("td:eq(0)").text(); // get SI no from checkbox 
     var col2 = currentRow.find("td:eq(1)").text(); // get item name 
     var col3 = currentRow.find("td:eq(2)").text(); // get item code 
     var col4 = currentRow.find("td:eq(3)").text(); // get supplier 
     var col5 = currentRow.find("td:eq(4)").text(); // get received qty 
     var col6 = $(currentRow).find("td:eq(5) input[type='text']").val(); // get accepted qty 
     var col7 = $(currentRow).find("td:eq(6) input[type='text']").val(); // get rejected qty 
     var col8 = $(currentRow).find("td:eq(7) input[type='text']").val(); // get remarks 

     var data = col1 + "\n" + col2 + "\n" + col3 + "\n" + col4 + "\n" + col5 + "\n" + col6 + "\n" + col7 + "\n" + col8; 

     alert(data); 
    } 

}); 

我已經對的jsfiddle
的一個實例： https://jsfiddle.net/fcaj5g52/1/

Answer 3

這個原因 - 你需要的時候，你有複選框的工作，因爲他們有國家使用change事件，像這樣：

$(document).on('change', '.btnSelect', function() {

我在測試中使用$(document)，因爲您沒有發佈其他代碼。

Answer 4

只檢查一個條件，即複選框被選中或不

var isChecked= document.getElementById("btnSelect").checked; 
    if(isChecked){ 
     // write your code here 
}