javascript - How to read input values based on checkbox checked?

Question

How can I get the input value inside of the table that is associated with the next checkbox? I just need to get only those input values whose checkbox is checked. Display the value as an innerHTML of div comma separated.

I can get all the input value but I am not able to apply the logic for the checkbox

I tried for all the input box values.

let olist = [...document.querySelectorAll('table tbody tr')].map(row => {
                const childs = row.querySelectorAll("input");
                return {
                    oKey: parseInt(childs[1].value),
                }
            })

function checkboxChecked(event) {
    let final = document.getElementById("final");
}

<table>
  <thead>
    <tr>
      <td>Checbox</td>
      <td>Key</td>
    </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="checkbox" onclick="checkboxChecked(event)"></td>
        <td><input type="number" value=1></td>
      </tr>
      <tr>
        <td><input type="checkbox" onclick="checkboxChecked(event)"></td>
        <td><input type="number" value=2></td>
      </tr>
      <tr>
        <td><input type="checkbox" onclick="checkboxChecked(event)"></td>
        <td><input type="number" value=3></td>
      </tr>
    </tbody>
</table>

<div id="final"></div>

question from:https://stackoverflow.com/questions/65917662/how-to-read-input-values-based-on-checkbox-checked

Answer 1

You are using the Array.prototype.map() function to create an array with transformed values. That's fine. But you want to include only values where the corresponding checkbox is checked. You can do that by adding a call to the Array.prototype.filter() function.

There are multiple ways to do this. One of the easiest solutions would be to first call map() to create an array with items containing the checkbox values and the corresponding number values, then use filter() to create an array with only the checked items, and then use map() again to get an array with the resulting number values. Something like this:

let olist =
  [...document.querySelectorAll('table tbody tr')]
    .map(row => {
      const children = row.querySelectorAll('input');
      return {
        checked: children[0].checked,
        value: parseInt(children[1].value)
      }
    })
    .filter(item => item.checked)
    .map(item => item.value)

document.getElementById('final').innerHTML = olist.join(', ')

Note that you can probably omit the parseInt call inside the first map callback function as well, because afterwards you are just concatenating those values into a string again.

Edit

An even shorter alternative would be something like this:

let olist =
  [...document.querySelectorAll('table tbody tr')]
    .filter(row => row.querySelector('input[type=checkbox]').checked)
    .map(row => row.querySelector('input[type=number]').value)

document.getElementById('final').innerHTML = olist.join(', ')