时间戳

首页 > 解决方案 > 如何根据选中的复选框读取输入值？

javascript - 如何根据选中的复选框读取输入值？

问题描述

如何在与下一个复选框关联的表中获取输入值？我只需要获取那些复选框被选中的输入值。将值显示为 div 逗号分隔的 innerHTML。

我可以获得所有输入值，但我无法应用复选框的逻辑

我尝试了所有输入框的值。

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>

标签： javascripthtml

解决方案

您正在使用该Array.prototype.map()函数创建一个具有转换值的数组。没关系。但是您只想包含选中相应复选框的值。您可以通过添加对该Array.prototype.filter()函数的调用来做到这一点。

有多种方法可以做到这一点。最简单的解决方案之一是首先调用map()创建一个包含复选框值和相应数字值的filter()项目的数组，然后使用创建一个仅包含选中项目的数组，然后map()再次使用以获取一个包含结果数字的数组价值观。像这样的东西：

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(', ')

请注意，您也可以省略parseInt第一个map回调函数中的调用，因为之后您只是再次将这些值连接到一个字符串中。

编辑

一个更短的替代方案是这样的：

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(', ')

推荐阅读