用于获取动态创建的多个(>300)单选按钮的值的jQuery
用于获取动态创建的多个(>300)单选按钮的值的jQuery
提问于 2018-06-18 00:18:08
我正在做一个科学项目。基本上，它有一个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
})
})我知道如何查找选定的单选按钮，但我不知道如何在动态创建的多个单选按钮组中执行相同的操作。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-18 00:25:28
您可以像这样使用.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"}你可以把它发布到你的后端或者做任何事情。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50898415
复制相关文章
相似问题