如何在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'）中传递了两个值，而您的方法原型接受三个值，因为js无法找到接受两个的radioChange方法参数。只需从方法原型中删除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>