在不同表上匹配的输入单选组

Input Radio Groups Matching on Different Tables

本文关键字：输入 单选组      更新时间：2023-09-26

我有两组<input type="radio" />按钮组，它们位于同一html页面上，但<td>不同。当用户从任一集合中选择一个时，我希望另一个集合具有选择的一个并给出相同的值。

示例：如果用户在名为 VT2 的组中选择了 1，然后用户更改为（自动回发）到另一个表，则<input type="radio" />名为 VT22 的按钮组将选中相同的<input type="radio" />按钮并提供相同的值。

<td>
  <label><input type="radio" name="VT2" value="1" checked />1</label>
  <label><input type="radio" name="VT2" value="1"/>2</label>&nbsp;
  <label><input type="radio" name="VT2" value="1"/>3</label>&nbsp;
</td>
<td>
  <label><input type="radio" name="VT22" value="1" checked />1</label>
  <label><input type="radio" name="VT22" value="1"/>2</label>&nbsp;
  <label><input type="radio" name="VT22" value="1"/>3</label>&nbsp;
</td>

这就是我对JavaScript所拥有的，但是我已经尝试了很多东西，但不知道该怎么做。 

$(document).ready(function () {
    var vt2 = document.getElementsByName("VT2");
    var vt22 = document.getElementsByName("VT22");
    for (i = 0; i < vt2.length; i++) {
        if (vt2.length > 0){
        } else if (vt22.length > 0){
        }
    }
});
这就是

你想要的吗？（我正在使用jQuery 2.2）https://jsfiddle.net/twLfasky/

.HTML：

<table>
<tr>
<td>
  <label><input type="radio" name="VT2" value="1" checked />1</label>
  <label><input type="radio" name="VT2" value="2"/>2</label>&nbsp;
  <label><input type="radio" name="VT2" value="3"/>3</label>&nbsp;
</td>
</tr>
<tr>
<td>
  <label><input type="radio" name="VT22" value="1" />1</label>
  <label><input type="radio" name="VT22" value="2"/>2</label>&nbsp;
  <label><input type="radio" name="VT22" value="3"/>3</label>&nbsp;
</td>
</tr>
</table>

.JS：

$('[name="VT2"]').change(function() {
  var secondRadioGroup = $('[name="VT22"]');
  var checkedValue = $('[name="VT2"]:checked').val();
  for(var i=0; i<= secondRadioGroup.length -1; i++) {
    if( checkedValue === secondRadioGroup[i].value ) {
        secondRadioGroup[i].setAttribute('checked', true);
      secondRadioGroup[i].setAttribute('value', checkedValue);
    }
  }
});
相关文章：