javascript - 让一个单选按钮选择另一个单选按钮

Question

我正在构建一个包含 8 个单选按钮的表单，其中 4 个用于系统 A，4 个用于系统 B。单选按钮的选项包括 CF、ISO、ISO-B 和 NW。我希望这样当客户为系统 A 选择单选按钮时，系统 B 上也会选择相同的按钮。

如何使我在系统 A 的单选按钮中选择的内容同时在系统 B 的单选按钮中选择？

What I am basing it off of

Answer 1

您可以使用像 ReactJS 这样的数据绑定(bind)框架来很好地完成此操作，但这里有一个可以使用的基本 jQuery 示例。只需监听第一组单选按钮上的“change”事件，然后使用 jQuery 从第二组单选按钮中选择适当的单选按钮。

$( function() {

  $("input[name='system-a']").on("change", function(e) {
     var newValue = e.target.value;
     $("input[name='system-b'][value='" + newValue + "']").prop("checked", true);
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <h2>System A</h2>
  <input type="radio" name="system-a" value="1">Option 1</input>
  <input type="radio" name="system-a" value="2">Option 2</input>
  <input type="radio" name="system-a" value="3">Option 3</input>
  <input type="radio" name="system-a" value="4">Option 4</input>
</div>
<div>
  <h2>System B</h2>
  <input type="radio" name="system-b" value="1">Option 1</input>
  <input type="radio" name="system-b" value="2">Option 2</input>
  <input type="radio" name="system-b" value="3">Option 3</input>
  <input type="radio" name="system-b" value="4">Option 4</input>
</div>