Blazor component enabling radio buttons to automatically deselect others

I have a problem with my radio buttons in the components I've created. Each component has its own set of radio buttons that interact with the database. The issue is that when I select a radio button in one component, it deselects the radio button in the other components. How can I fix this so that I am able to select radio buttons in all components simultaneously?

Here are the radio buttons:

            <label class="GroupTitle">Filters:</label><br/>
            <input type="radio" name="number" id="all" checked="@checkedRadio("all", FileFilter)" @oninput="@(() => UpdateFilter("all"))" /> 
            <label for="">Clear all files</label><br />  
            <input type="radio" name="number" id="number" checked="@checkedRadio("number", FileFilter)" @oninput="@(() => UpdateFilter("number"))" />
            <label for="">Based on number of files</label><br />    
            <input type="radio" name="number" id="date"  checked="@checkedRadio("date", FileFilter)" @oninput="@(() => UpdateFilter("date"))" />    
            <label for="date">Based on date of files</label><br />    

The function checkedRadio() looks like this:

    private bool checkedRadio(string state, FileFilter Filter)
    {
        if(state == Filter.Filter)
        {
            return true;

        }
        else
        {
            return false;
        }
    }

And here's the UpdateFilter() function:

    private void UpdateFilter(string option)
    {
        filter = option;
        FileFilter.Filter = option;
    }

Answer №1

All radio buttons on this form currently share the same name attribute.

name="options"

This causes them to behave as a typical radio group, where only one option can be chosen at a time. If you want users to select multiple options, consider using checkboxes instead and assigning each a unique name.

Learn more about HTML Radio buttons here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio

For information on HTML Checkboxes, visit: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/checkbox

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring test automation methods for selecting HTML elements - whether based on Element ID or DataAttribute

As I work on implementing ID's for UI Test automation, I am considering whether using data-attributes (such as data-testHandle="mybutton") would be a more readable option for future developers. These ID's are solely for testing purposes. Accord ...

The text font family isn't displaying the £ symbol accurately

On my webpage, I have decided to use the font "Century Gothic, Arial, Courier New, Sans-Serif" for my text. However, whenever I include the £ character, it does not display correctly on various browsers like Firefox, Explorer, Chrome & Safari. HMTL: < ...

Tips for creating a pop-up window on an ASP.NET web form

I am looking to incorporate a popup window as a child of my primary asp.NET form. The popup window will allow users to input information using a dropdown list. When the popup window appears, it will take focus and disable the main window. ...

The OneTimeSetup method is executed four times in conjunction with the four TestFixtures during testing

I'm encountering an issue with my Parallelizable UI Selenium tests where the [OneTimeSetup] method is being called multiple times, resulting in numerous Testrail test runs. Within my base class, the [OneTimeSetup] method is used to create a testrun i ...

Is the whitespace-pre-line feature of TailwindCSS experiencing issues?

whitespace-pre-line doesn't seem to be working for me. I attempted to replicate the same code from my text editor on https://play.tailwindcss.com/, and it worked perfectly. Below is a screenshot that I have attached. This is the sample code in my tex ...

Tips for Generating CSV Files in C# Without Utilizing any Packages (,NET Core)

Is it possible to create a well-structured csv file in .NET core without relying on any external packages? Additionally, can the class Keys be used as the header? public class TestArray { public string LastName{ get; set; } public ...

What is the best way to retrieve the value from a standard select element in a .NET C# web application?

Does anyone have a solution for extracting the value from a normal select element in a .NET C# web application? For example, consider the following code snippet: HTML code: <Select ID="test" name="test"> <option value ="1">One</option&g ...

Difficulty in altering the color of Gridview cells based on a specific condition

I need help changing the cell color of a gridview based on whether the date in the DOT column is before today's date. However, my current code ends up turning all rows red for the DOT column even when the date is greater than today. https://i.sstati ...

Arranging elements within the container: navigation bar, slideshow, and introductory section

I currently have a setup with a navbar, carousel, and intro section. Desired Layout: Carousel should be full width and height Navbar positioned on top of the carousel Intro content placed below the carousel Current Issues: The images in the carousel ...

*ngIf doesn't seem to be functioning as expected compared to other *ngIf directives

Encountering a peculiar issue with my *ngIf related to the isAdmin variable which determines whether the list of users in userList should be displayed or not. Strangely, it seems to behave differently compared to other *ngIf statements within the same comp ...

I am interested in implementing a logout feature using a button in PHP

<?php session_start(); ?> <form> <input type="button" id="logout" value="logout" name="logout"> </form> After initializing the session during login, I am seeking to terminate it using a button rather than via <a href="">l ...

The SVG element's width is set to 100%, but it does not expand

Here is the SVG code snippet I am currently working with: <div className="behaviorPatternsItem" key={item.id}> <div className="behaviorPatternsItemStyled"> <svg height="25" width="100%" preserveAspectRatio="non ...

The art of discovering the xpath for various HTML elements sharing similar attributes

Currently, I am utilizing Selenium to extract values encapsulated within specific tags. The website in question is . Despite the objects possessing identical properties, resulting in similar xpath scripts, the target values include 5,615505 TL, 4,827450 TL ...

CSS code that causes the animated photo banner to reset instead of continuously looping back to the first

I followed a tutorial and created this banner using HTML and CSS. However, I encountered an issue where instead of the banner continuing in loops, it keeps resetting. Since we haven't covered JavaScript yet in university, I'm looking for help to ...

Issue with radio button not updating when selected

I am encountering a strange issue with a form I am currently developing. The code snippet below showcases the problem: <?php $show = ' checked '; $hide = ' '; /* Some logic to swap the checked here */ ?> <label cl ...

"How can we retrieve a variable from a global class that is not stored in the app_code folder in an ASP.NET

My situation involves a global class that is not located within the 'app_code' folder. Inside this class, I have declared a static variable. Unfortunately, due to it not being in the 'app_code' folder, I am encountering difficulties acc ...

Encountering a 500 error while attempting to execute a basic method using ajax

I'm currently working on creating a basic aspx page using a single controller. Below is the code for the aspx page: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1.Default" %> <% %> ...

table with flexible cell width and fixed table width

I've been troubleshooting this issue for days, but I just can't seem to find a solution! The problem lies within a table used on a webpage. If I don't specify table-layout, I can make one cell width dynamic, but I lose the ability to set &a ...

I am experiencing issues with resizing my image within the CSS flexbox layout

I attempted to create a flex container for my jpg file in HTML but ran into an issue. Even after adding image dimensions in CSS, the image remained the same size with no changes at all. </head> <div class="flex-container"> ...

Ways to personalize the appearance of a message box

I'm currently working on a C# application and I'd like to customize the appearance of my message box. Is this something that can be done? For example, I want to change the button styles, text color, and other visual elements. ...