Create array of Radio buttons and pass to Net Core Controller

I am trying to pass a list (array) of radio buttons from JavaScript to a C# Net Core 6 Controller.

The HTML is (something) like this:

<input class="js-filter-item" type="radio" name="Performance_Type" value="Standard" id="filter-group-Performance_Type--item-Standard"  />
<input class="js-filter-item" type="radio" name="Performance_Type" value="VIP" id="filter-group-Performance_Type--item-VIP"  />

<input class="js-filter-item" type="radio" name="Price" value="Up_to_£55" id="filter-group-Price--item-Up_to_£55"  />
<input class="js-filter-item" type="radio" name="Price" value="Up_to_£70" id="filter-group-Price--item-Up_to_£70"  />

So, there are a number of Groups (more than I've shown here), each with a number of options. I want to get either the full list of options with "name", "value" and "checked". Or if it's a lot easier, just a lit of "checked" options (with the "id" would do)

The closest I have got so far is:

var options = document.querySelectorAll('.js-filter-item');
var optionsArray = JSON.stringify((Array.from(options).map(el => ([el.name, el.value, el.checked]))));

With the parameter on the Controller defined as "string"

However, I am getting this, which isn't valid JSON:

[["Performance_Type","Standard",true],["Performance_Type","VIP",false]]

I feel like I'm not going about this the right way!! Basically, in the C# Controller, I need to know which options are checked.

> I feel like I'm not going about this the right way!! Basically, in the
> C# Controller, I need to know which options are checked.

Actually, this scenario can be achieve through numerous way and in order to sort which radio buttons are checked, first of all we should set conditionals based on its Id. In addition, we need bind those ids into class and Finally, send request to the controller.

Lets have a look in practice: assuming we have following class.

Model:

public class RadioButtonModel
    {
     
        public string Name { get; set; }
        public string Value { get; set; }
        public string Id { get; set; }
        public bool IsChecked { get; set; }
    }

Controller:

    [HttpPost]
    public ActionResult PostRadioBUtton(List<RadioButtonModel> radioButtonModels)
    {
        return Ok(radioButtonModels);
    }

View:

HTML:

<input class="js-filter-item" type="radio" name="Performance_Type" value="Standard" id="filter-group-Performance_Type--item-Standard" checked />
<input class="js-filter-item" type="radio" name="Performance_Type" value="VIP" id="filter-group-Performance_Type--item-VIP" />

<input class="js-filter-item" type="radio" name="Price" value="Up_to_£55" id="filter-group-Price--item-Up_to_£55" />
<input class="js-filter-item" type="radio" name="Price" value="Up_to_£70" id="filter-group-Price--item-Up_to_£70" checked />

Note: I have set checked attribute in first and last radio button to test the scenario. You have to do it in if conditional based on Id or name attribute. There are tons of sample onlin how to do that.

Script:

@section scripts {
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
    <script>

        $(document).ready(function () {
            var options = document.querySelectorAll('.js-filter-item');
            var optionsArray = (Array.from(options).map(el => ([el.name, el.value, el.id, el.checked])));
       
            var listRadio = [];
            for (let i = 0; i < optionsArray.length; i++) {
                console.log("array: ", i, optionsArray[i]);
                    var items = {
                        Name: optionsArray[i][0],
                        Value: optionsArray[i][1],
                        Id: optionsArray[i][2],
                        IsChecked: optionsArray[i][3],
                       
                       

                    }
                    listRadio.push(items);
            }
            console.log(listRadio);
            var url = '@Url.Action("PostRadioBUtton","CountOnModel")';
            $.ajax({
                url: url,
                type: "POST",
                datatype: "JSON",
                data: { radioButtonModels: listRadio },
                success: function (response) {
                    console.log(response);
                }
            });
        });
    </script>
    }

Output: