Script for getting input value based on checkbox

Question

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.

its intended that someone does research first on the matter... you'll find something based on a google search like "javascript get values from checkbox" and such — L_Church
– L_Church, Commented Feb 8, 2018 at 8:39
I tried searching at Google, I tried use foreach / each etc but fail. Then I ask here. — Alpha Wong
– Alpha Wong, Commented Feb 8, 2018 at 8:42
Actually, td column will auto-generated with different amount, I need to control which tr row required and get that row's all data. — Alpha Wong
– Alpha Wong, Commented Feb 8, 2018 at 8:49

Mamun · Accepted Answer · 2018-02-08 09:51:17Z

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>

ztadic91 · Accepted Answer · 2018-02-08 09:12:36Z

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

Collectives™ on Stack Overflow

Script for getting input value based on checkbox

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related