How do I check which radio button in a group of radio buttons is selected in a Jinja2 HTML Template?

Question

I have a jinja2 html template that has two groups of radio buttons, which we will call radio_group_1 and radio_group_2. Each button in radio_group_2 is mapped to a corresponding button in radio_group_1 on a value. What I am trying to do is when the user selects a radio button in radio_group_2, I want the radio button selection in radio_group_1 to automatically change to its corresponding radio button.

I have tried using javascript to no avail.

Thanks for any help!

<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

The only issue with your code is that, you're passing two values in the method call radioChange('1','button1') whereas your method prototype accepts three values because of which js was failing to find a radioChange method which accepts two parameters. Just remove radioArray from the method prototype and it's fixed.

 <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>