jQuery 获取动态创建的多个(>300)单选按钮的值

Question

我正在从事一项科学项目。基本上它有一个 HTML 表格，如所附屏幕截图所示 -

示例 jsFiddle 已上传 here .

示例 HTML 代码段如下 -

<table>
<thead>
  <tr class="myHead">
   <th>Markers</th>
   <th>-</th>
    <th>1+</th>
    <th>2+</th>
    <th>3+</th>
    <th>+/-</th>
  </tr>
</thead>
<tr><td>CD1a</td><td><input type="radio" name="CD1a" value="0"></td><td><input type="radio" name="CD1a" value="2"></td><td><input type="radio" name="CD1a" value="3"></td><td><input type="radio" name="CD1a" value="4"></td><td><input type="radio" name="CD1a" value="1"></td></tr>
<tr><td>CD1b</td><td><input type="radio" name="CD1b" value="0"></td><td><input type="radio" name="CD1b" value="2"></td><td><input type="radio" name="CD1b" value="3"></td><td><input type="radio" name="CD1b" value="4"></td><td><input type="radio" name="CD1b" value="1"></td></tr>
<tr><td>CD1c</td><td><input type="radio" name="CD1c" value="0"></td><td><input type="radio" name="CD1c" value="2"></td><td><input type="radio" name="CD1c" value="3"></td><td><input type="radio" name="CD1c" value="4"></td><td><input type="radio" name="CD1c" value="1"></td></tr>
<tr><td>CD1d</td><td><input type="radio" name="CD1d" value="0"></td><td><input type="radio" name="CD1d" value="2"></td><td><input type="radio" name="CD1d" value="3"></td><td><input type="radio" name="CD1d" value="4"></td><td><input type="radio" name="CD1d" value="1"></td></tr>
<tr><td>CD1e</td><td><input type="radio" name="CD1e" value="0"></td><td><input type="radio" name="CD1e" value="2"></td><td><input type="radio" name="CD1e" value="3"></td><td><input type="radio" name="CD1e" value="4"></td><td><input type="radio" name="CD1e" value="1"></td></tr>
<tr><td>CD2</td><td><input type="radio" name="CD2" value="0"></td><td><input type="radio" name="CD2" value="2"></td><td><input type="radio" name="CD2" value="3"></td><td><input type="radio" name="CD2" value="4"></td><td><input type="radio" name="CD2" value="1"></td></tr>
<tr><td>CD3</td><td><input type="radio" name="CD3" value="0"></td><td><input type="radio" name="CD3" value="2"></td><td><input type="radio" name="CD3" value="3"></td><td><input type="radio" name="CD3" value="4"></td><td><input type="radio" name="CD3" value="1"></td></tr>
<tr><td>CD3d</td><td><input type="radio" name="CD3d" value="0"></td><td><input type="radio" name="CD3d" value="2"></td><td><input type="radio" name="CD3d" value="3"></td><td><input type="radio" name="CD3d" value="4"></td><td><input type="radio" name="CD3d" value="1"></td></tr>
<tr><td>CD3e</td><td><input type="radio" name="CD3e" value="0"></td><td><input type="radio" name="CD3e" value="2"></td><td><input type="radio" name="CD3e" value="3"></td><td><input type="radio" name="CD3e" value="4"></td><td><input type="radio" name="CD3e" value="1"></td></tr>
<tr><td>CD3g</td><td><input type="radio" name="CD3g" value="0"></td><td><input type="radio" name="CD3g" value="2"></td><td><input type="radio" name="CD3g" value="3"></td><td><input type="radio" name="CD3g" value="4"></td><td><input type="radio" name="CD3g" value="1"></td></tr>
<tr><td>CD4</td><td><input type="radio" name="CD4" value="0"></td><td><input type="radio" name="CD4" value="2"></td><td><input type="radio" name="CD4" value="3"></td><td><input type="radio" name="CD4" value="4"></td><td><input type="radio" name="CD4" value="1"></td></tr>
</table>

实际上，这些标记的列表是使用 Select Query 从 SQL 数据库生成的(数量超过 300 个)。单选按钮的名称与数据库表中标记的列名称及其各自的值保持一致。

现在，我想要实现(但未能实现)的是，每当单击单选按钮时，它应该创建一个列表/数组，其中包含所有选定的单选按钮及其各自的值这样，它可以用于创建另一个 Select 查询。 例如如果选中的单选按钮类似于(选中的单选按钮的值在括号中)- CD1b(2)、CD2(4)、CD4(1)；所以最后的查询就像 - 从 my_table 中选择 *，其中 CD1b=2 and CD2=4 and CD4=1;

示例 jQuery

$(document).ready(function() {

  $("input:radio").click(function() {
   //Logic to find out all the selected radio buttons in way that can be used to create an SELECT MySQLi Query
  })

})

我知道如何找出选中的单选按钮，但我不知道如何在动态创建的多个单选按钮组中执行同样的操作。

Answer 1

您可以使用 .serializeArray()，像这样(参见 forked JSfiddle here ):

$(document).ready(function() {
  var $inputs = $("input:radio");
  $inputs.change(function() {
    var state = $inputs.serializeArray().reduce((acc, datum) => {
      acc[datum.name] = datum.value;
      return acc;
    }, {});
    console.log(state);
  });
});

state 看起来像

{"CD1c":"2","CD1e":"3","CD3e":"4"}

你可以 POST 到你的后端或者做任何事情。