jQuery获取动态创建的多个（＆gt; 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）;所以最后的查询就像 - Select * from my_table where 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"}

你可以张贴到你的后端或做任何事情。