CODEWITHSUNDEEP
javascriptjquerycheckbox
Jsel
Jsel

Reputation: 199

get table rows only when table checkbox is "checked"

I am using below code to retrieve the values of selected row using checkbox class = btnSelect.

I want to get the rows only when the checkbox is marked as checked.

Current code get the values, both when checkbox is checked and unchecked.

Why does the code below get the values when the checkbox is either checked or unchecked?

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

[![enter image description here][1]][1]

Upvotes: 2

Views: 1143

Answers (4)

guradio
guradio

Reputation: 15555

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

DOnt use this context because your click event is the save button

Upvotes: 1

Solomon Tam
Solomon Tam

Reputation: 739

You can use checked property from the DOM object.

For exmaple

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

});

I have made an exmaple on jsfiddle: https://jsfiddle.net/fcaj5g52/1/

Upvotes: 1

naib khan
naib khan

Reputation: 1118

just check a condition that the check box is checked or not

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

Upvotes: 0

Vasilij Altunin
Vasilij Altunin

Reputation: 822

Reason of this - you need to use change event when you work with checkboxes, because they have state, like this:

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

I use $(document) in my test because you did not post rest of you code.

Upvotes: 0

Related Questions