How would I use multiple radio buttons and multiple groups in one form so that only 1 button per row and column can be selected?

Question

I'm working on a simple budget calculator to take in an int input and a priority of 1-4 on 3 different things with a custom int range. AKA radio buttons in a 3x4 grid. I only want one button to be selected per row and per column.

I've tried giving specific names for each item per row, but I don't want to give the same name for every item. The project is mainly going to be in C# and eventually I'll be using the selected buttons for validations to save their choices into a database, but I won't worry about that now.

Essentially I have this code repeated 3 times, one for each priority option.

<form asp-action="Calculate" method="post">
<h4>Housing</h4>
    <label class="radio-inline">
        <input type="radio" name="A" checked>Very Little
        <input type="radio" name="B">A Normal Amount
        <input type="radio" name="C">Very Important
        <input type="radio" name="D">Extremely Important
    </label><br>

(Trying to keep it simple)

What my code currently does is make it so only one A, B, C, or D can be checked. However, I can check A, B, C, and D on the same line. It wouldn't make any sense for someone to prioritize all options. Any help is greatly appreciated!

Answer 1

If you do not want to use same name for everything then write a JavaScript function - which on radio-check calls a functions which removes other checked radios.

I don't know how your code looks like but for this snippet you can get all input[type:radio] under class "radio-inline" and similarly distinguish using a div/label between various rows.

For selection/function on radio buttons using JavaScript - refer: https://codepen.io/joexadrez/pen/DzctL