Button to tick multiple radio buttons

Question

I have a .NET MVC project wherein I have multiple radio buttons in a view that's binded to a unique item in my SQL table. This is a code block in my View page that generates two radio buttons for each row.

@foreach(var item in Model){
@Html.RadioButton(item.ReviewID, "Retain")Retain &emsp;
@Html.RadioButton(item.ReviewID, "False")Remove

}

Below the whole list, I have a two buttons that I'm trying to work on that will tick all of the corresponding Radio Buttons.

<input type="button" value="Retain All" onclick="retainAll()" />
<input type="button" value="Retain All" onclick="removeAll()" />

im trying to call these two helpers I declared in my View:

@helper retainAll()
{
    foreach (var item in Model)
    {
        @Html.RadioButton(item.ReviewID, "Retain", isChecked: true);
    }
}

@helper removeAll()
{

    foreach (var item in Model)
    {
        @Html.RadioButton(item.ReviewID, "Remove", isChecked: true);
    }

}

When I try to click any of the buttons though, it doesn't do anything. This is what it looks like in my View:

https://i.stack.imgur.com/PC0B9.jpg

Take note that the save changes button there works. When clicked, it updates the SQL database with the radio button clicked.

The idea with the "Retain All" and "Remove All" buttons is just to tick all of the radio buttons with Retain or Remove.

**Again, I'm not asking on how to post back the values of the radio button to my sql table. Just asking if there's a way where if I click the "Retain All" or "Remove All" button in the view, it will tick all of the Corresponding radio buttons in the view.(set their 'isChecked' attributes to true)

Deleted the helper code block in my view and replaced it with this:

<script>
function retainAll()
{
    @foreach (var item in Model)
    {
        @Html.RadioButton("rbResponse" + item.ReviewItemID.ToString(), "Retain", isChecked: true);
    }
}

function removeAll()
{
    @foreach (var item in Model)
    {
        @Html.RadioButton("rbResponse" + item.ReviewItemID.ToString(), "Remove", isChecked: true);
    }

}
</script>

Your `@helper` methods make no sense - that is razor code and is executed the server before the model is passed to the view - it does not exist on the client. — , Aug 16 '18 at 08:32
And your `foreach` loop makes no sense either - you are binding the radio buttons to something which does not exist (a property named `item.ReviewID` and it will not bind to anything when you submit. You need a view model containing a (say) `string SelectedValue` and a `List` property for the options — , Aug 16 '18 at 08:35
You need to write your functions as JavaScript functions so they are executed client side. Once your page is rendered, your razor code will not exist anymore. — LocEngineer, Aug 16 '18 at 08:37
@StephenMuecke, the item.ReviewID property is gotten from my Controller. there's a LINQ query in my controller that gets data from my SQL table and passes it onto my view. it's bound to the "ReviewID" value for each row in my SQL table. — Joenelle Caniza, Aug 16 '18 at 08:49
No its not - when you submit the form, it will not bind to anything. You need to use `for(int i = 0; i < Model.Count; i++) { @Html.RadioButtonFor(m => m[i].ReviewID, "Retain") ... }` - refer [Post an HTML Table to ADO.NET DataTable](https://stackoverflow.com/questions/30094047/post-an-html-table-to-ado-net-datatable/30094943#30094943) — , Aug 16 '18 at 08:51
I think the most important point here is, like @StephenMuecke says, razor code is executed on the server and determines what HTML is sent to the client. You'll need to implement this in `javascript` — ediblecode, Aug 16 '18 at 08:52
Once the page is rendered your Model doesn't exist anymore. You will have to iterate over each radio button via their IDs. — LocEngineer, Aug 16 '18 at 08:52

score 0 · Answer 1 · answered Aug 17 '18 at 02:45

I finally figured out the solution. I made a script in my View as such:

<script type="text/javascript">

        $(document).ready(function () {
            $("#selectRetain").click(function () {
                $('input:radio[value=Retain]').prop('checked', true);
            });

            $("#selectRemove").click(function () {
                $('input:radio[value=Remove]').prop('checked', true);
            })
        });        
    </script>

and changed my buttons like this:

<input type="button" value="Retain All" id='selectRetain'>
<input type="button" value="Retain All" id='selectRemove'>

Now whenever I select each one of those buttons, they change the isChecked value of the radio buttons in the page to true.

Button to tick multiple radio buttons

1 Answers1