一個組件中的 Blazor 單選按鈕從其他組件中取消選擇單選按鈕

Question

我在我創建的每個組件中都有一個單選按鈕列表，這些組件可以讀取和寫入數據庫，這很好，但是當我 select 一個組件中的單選按鈕時，它將取消選擇第一個單選按鈕 /其他組件。 我怎樣才能做到這一點，以便我可以 select 所有組件中的單選按鈕。

單選按鈕：

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

檢查無線電（）：

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

        }
        else
        {
            return false;
        }
    }

更新過濾器（）：

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

Answer 1

您的所有單選按鈕都共享相同的名稱屬性。

name="number"

所以它的行為就像一個廣播組應該表現的那樣； 具有相同名稱的單選按鈕形成一組互斥值（這是 HTML 本身，而不是 Blazor 事物。）如果您的預期行為是可以選擇多個選項，請查看復選框並為每個選項指定不同的名稱。

HTML 單選按鈕： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio

HTML 復選框： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/checkbox