javascript - 如何检查在 Jinja2 HTML 模板中选择了一组单选按钮中的哪个单选按钮？

Question

我有一个 jinja2 html 模板，其中有两组单选按钮，我们将其称为 radio_group_1 和 radio_group_2。 radio_group_2 中的每个按钮都映射到 radio_group_1 中相应按钮的值。我想做的是，当用户选择 radio_group_2 中的单选按钮时，我希望 radio_group_1 中的单选按钮选择自动更改为其相应的单选按钮。

我尝试过使用 javascript，但没有成功。

感谢您的帮助!

<h2>Testing radio functionality</h2>
<div>
<input name="radio_group_1" id="1" value="button1" type="radio" onclick="radioChange('1','button1');" />Button 1
<input name="radio_group_1" id="2"value="button2" type="radio" onclick="radioChange('2','button2');" />Button 2
<input name="radio_group_1"id="3" value="button3" type="radio" onclick="radioChange('3','button3');" />Button 3
<br />
</div>

<div>
<input name="radio_group_2" id="4" value="button4" type="radio" onclick="radioChange('4','button1');" />Button 4
<input name="radio_group_2" id="5" value="button5" type="radio" onclick="radioChange('5','button1');" />Button 5
<input name="radio_group_2" id="6" value="button6" type="radio" onclick="radioChange('6','button1');" />Button 6
</div>

<script type="text/javascript">
function radioChange(id,radioButton,radioArray)
  {

  radiobtn = document.getElementById(id);
  radiobtn.checked = true;
  new_number = Number(id) + 3
  new_number.toString(10)
radiobtn = document.getElementById(new_number);
  radiobtn.checked = true;
}
</script>

Answer 1

您的代码的唯一问题是，您在方法调用 radioChange('1','button1') 中传递了两个值，而您的方法原型(prototype)接受三个值，因为 js未能找到接受两个参数的 radioChange 方法。只需从方法原型(prototype)中删除 radioArray 即可修复。

<h2>Testing radio functionality</h2>
<div>
<input name="radio_group_1" id="1" value="button1" type="radio" onclick="radioChange('1','button1');" />Button 1
<input name="radio_group_1" id="2"value="button2" type="radio" onclick="radioChange('2','button2');" />Button 2
<input name="radio_group_1"id="3" value="button3" type="radio" onclick="radioChange('3','button3');" />Button 3
<br />
</div>

<div>
<input name="radio_group_2" id="4" value="button4" type="radio" onclick="radioChange('4','button1');" />Button 4
<input name="radio_group_2" id="5" value="button5" type="radio" onclick="radioChange('5','button1');" />Button 5
<input name="radio_group_2" id="6" value="button6" type="radio" onclick="radioChange('6','button1');" />Button 6
</div>

<script type="text/javascript">
function radioChange(id,radioButton)
  {

  radiobtn = document.getElementById(id);
  radiobtn.checked = true;
  new_number = Number(id) + 3
  new_number.toString(10)
radiobtn = document.getElementById(new_number);
  radiobtn.checked = true;
}
</script>