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

您可以使用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 2

＆＃13;

$(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);





  });

  //});
});

＆＃13;

<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>

＆＃13;

因为您的点击事件是保存按钮

，所以请使用此上下文

Answer 3

原因 - 您在处理复选框时需要使用push 5 push 6 push 3 quit [5, 6, 3]事件，因为它们具有状态，如下所示：

change

我在测试中使用$(document).on('change', '.btnSelect', function() {，因为您没有发布其余的代码。

Answer 4

只检查复选框是否已选中

$(document)

仅当“复选”表复选框时才获取表格行

4 个答案: