CODEWITHSUNDEEP
javascriptjquery
Alpha Wong
Alpha Wong

Reputation: 47

Script for getting input value based on checkbox

I have a table as below code. 

<table name="table1">
<tr>
    <td><input name="checking" type="checkbox"></td>
    <td><input class="send_data" type="hidden" value="1">a</td>
    <td>b</td>
    <td><input class="send_data" type="hidden" value="2">c</td>
    <td>d</td>
</tr>
<tr>
    <td><input name="checking" type="checkbox"></td>
    <td>e</td>
    <td>f</td>
    <td><input class="send_data" type="hidden" value="3">g</td>
    <td>h</td>
</tr>
<tr>
    <td><input name="checking" type="checkbox"></td>
    <td><input class="send_data" type="hidden" value="4">i</td>
    <td>j</td>
    <td><input class="send_data" type="hidden" value="5">k</td>
    <td><input class="send_data" type="hidden" value="6">l</td>
</tr>
</table>
<button onclick="button()"></button>

<script>
function button(){
  var selected = [];
  /*selected.push($(".send_data").val());*/

  alert(selected);
}
</script>

Now, I would like to do some action:
1. I choose some of checkbox and checked
2. For the "tr" which checkbox is checked, I will get all the input value (class = "send_data") of that "tr"
3. Push all values into "selected" array
Example: if first and third checkbox are checked, then selected = [1,2,4,5,6]
Question: how can I use jquery / javascript to get all datas based on selected checkbox. Thank you.

Upvotes: 0

Views: 56

Answers (2)

Mamun
Mamun

Reputation: 68933

Try the following with jQuery's each():

$('#myBtn').click(function(){
  var selected = [];
  $('table tr').each(function(){
    var len = $(this).find('input[name="checking"]:checked').length;
    if(len > 0){
      $(this).find('.send_data').each (function() {
        selected.push(parseInt($(this).val()));
      });
    }
  });
  console.log(selected);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table name="table1">
<tr>
    <td><input name="checking" type="checkbox"></td>
    <td><input class="send_data" type="hidden" value="1">a</td>
    <td>b</td>
    <td><input class="send_data" type="hidden" value="2">c</td>
    <td>d</td>
</tr>
<tr>
    <td><input name="checking" type="checkbox"></td>
    <td>e</td>
    <td>f</td>
    <td><input class="send_data" type="hidden" value="3">g</td>
    <td>h</td>
</tr>
<tr>
    <td><input name="checking" type="checkbox"></td>
    <td><input class="send_data" type="hidden" value="4">i</td>
    <td>j</td>
    <td><input class="send_data" type="hidden" value="5">k</td>
    <td><input class="send_data" type="hidden" value="6">l</td>
</tr>
</table>
<button id="myBtn">Generate Array</button>

Upvotes: 1

ztadic91
ztadic91

Reputation: 2804

here's a solution which finds all checked checkboxes and for each checked checkbox gets the values from the input fields inside the same tr.

function button() {
    var checkboxes = document.querySelectorAll('[name=table1] input[type="checkbox"]');
    var result = [];
    for (var i = 0; i < checkboxes.length; i++) {
        var currentCheckbox = checkboxes[i];
        debugger;
        if (currentCheckbox.checked) {
            var
                inputs = currentCheckbox.parentNode.parentNode.querySelectorAll('input.send_data');
            for (var j = 0; j < inputs.length; j++) {
                result.push(inputs[j].getAttribute('value'));
            }
        }
    }
    console.log(result)
}

// ["3", "4", "5", "6"]

Upvotes: 1

Related Questions