How to get radio button value and clear checked radio button in table

Question

I'm creating multiple radio button in table, using Razor syntax (under ASP.NET Core MVC).

<table class="table table-striped table-hover table-bordered table-sm custom-font">
    <thead>
        <tr>
            <th>Id</th>
            <th>Document Name</th>
            <th>Signed?</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>@item.Id</td>
                <td>@item.DocumentName</td>
                <td>
                    @foreach (var sign in item.Signs)
                    {
                        <div class="form-check form-check-inline">
                            <input type="radio" asp-for="@item.Sign" value="@sign" class="form-check-input" />
                            <label class="form-check-label">@sign</label>
                        </div>
                    }
                    <div class="text-center">
                        <a href="@Url.Action("UpdateSigned", "Document")" class="update" data-id="@item.Id">Update</a> | <a href="#" class="clear">Clear</a>
                    </div>
                </td>
            </tr>
        }
    </tbody>
</table>
@section Scripts {
<script>
    $(function () {
        $('.update').click(function (e) {
            e.preventDefault();
            var signed = $('input[name="item.Signed"]:checked').val();
            alert(signed);
        });

        $('.clear').click(function (e) {
            e.preventDefault();
            $('.clear input[type="radio"]').prop('checked', false);
        });
    });
</script>

}

Per row, there are Update and Clear links, to update the record and clear the checked radio button per row.

The problem is, from razor syntax, it will generate html radio with the same id & name for each row. So I cannot check the radio per row and clear the checked radio button.

How to solve this?

I'm creating similar code in jsfiddle for this case.

Answer 1

<input type="radio" asp-for="@item.Sign" value="@sign" class="form-check-input" />

it will generate html radio with the same id & name for each row.

The asp-for attribute will generate and set value for id and name html attribute, which cause the issue.

Per row, there are Update and Clear links, to update the record and clear the checked radio button per row.

To achieve your requirement, you can try:

remove asp-for attribute, and dynamically set default checked option

<input type="radio" name="Sign_for_@item.Id" @(item.Sign==sign? "checked" : "") value="@sign" class="form-check-input" />

modify js code to find parent td element, then find radio buttons

<script>
    $(function () {
        $('.update').click(function(e) {
            e.preventDefault();
            var signed = $(this).parent().parent().find('input[type="radio"]:checked').val();
            alert(signed);
        });

        $('.clear').click(function(e) {
            e.preventDefault();
            $(this).parent().parent().find('input[type="radio"]').prop('checked', false);
        });
    })
</script>

Test Result

Answer 2

You could use for loop instead of foreach and take advantage of index number to create unique Ids per each row.

<table class="table table-striped table-hover table-bordered table-sm custom-font">
<thead>
    <tr>
        <th>Id</th>
        <th>Document Name</th>
        <th>Signed?</th>
    </tr>
</thead>
<tbody>
    @for(int i = 0; i < Model.Count; i++)
    {
        var item = Model[i];
        <tr>
            <td>@item.Id</td>
            <td>@item.DocumentName</td>
            <td>
                @foreach (var sign in item.Signs)
                {
                    <div class="form-check form-check-inline">
                        <input type="radio" name="item.Sign@i" id="@item.Sign@i" value="@sign" class="form-check-input" />
                        <label class="form-check-label">@sign</label>
                    </div>
                }
                <div class="text-center">
                    <a href="@Url.Action("UpdateSigned", "Document")" class="update" data-id="@item.Id">Update</a> | <a href="#" class="clear">Clear</a>
                </div>
            </td>
        </tr>
    }
</tbody>

Instead of jquery event listeners you could use onclick attribute on Update and Clear buttons and pass row number as an argument. But I'm not sure if this is right solution.