简体   繁体   中英

Blazor radio buttons in one component unselecting radio buttons from the others

I've got a list of radio buttons in each of the components I've created which read from and write to the database which is good, but when i select a radio button in one component it will unselect the radio button in the first / other components. How can I make it so I can select the radio buttons in all of the components.

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 />    

checkedRadio():

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

        }
        else
        {
            return false;
        }
    }

UpdateFilter():

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

All of your radio buttons are sharing the same name attribute.

name="number"

So it is behaving like a radio group should behave; radio buttons with the same name form a group of mutually exclusive values (this is HTML itself, not a Blazor thing.) If your intended behavior is that multiple options can be selected, have a look at check boxes and give each a different name.

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

HTML Checkboxes: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/checkbox

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM