Question

我有两组<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){

        }
    }
});

Answer 1

是你想要的吗？（我使用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);

    }
  }

});

输入无线电组在不同的表上匹配

1 个答案: