Multi selectlist checkbox with Asp .Net Core Server-side Blazor 5.x

Model

 public class MultiFilterSearchModel
    {
        public MultiFilterSearchModel()
        {


           
        }

        public List<string> bs { set; get; }

        //Filter
        /// <summary>
        /// Price - From 
        /// </summary>
        public NumericRangeFilter PriceRange = new NumericRangeFilter();



        /// <summary>
        /// 上市日期
        /// </summary>
        public DateRangeFilter StockTradeFirstDayDateRange = new DateRangeFilter();
    }

Razor

<EditForm Model="@multiFilterSearchModel" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    @*<InputText id="name" @bind-Value="multiFilterSearchModel.bs" />*@

    @for (var i = 1; i <= 10; i++)
    {
        <input name="AreChecked" type="checkbox" value="@i" /> @i<br />
    }

    <select @bind="val">
        <!-- Here val is Off, but dropdown button shows On -->
            <option value="On">On</option>
            <option value="Off">Off</option>
    </select>
    <p>@val</p>         <!-- Here val is Off -->


        <button type="submit">Submit</button>
</EditForm>

@code {

    private string val = "Off";

    bool isLoading = false;
    private bool loadFailed;




    [Parameter] public MultiFilterSearchModel multiFilterSearchModel { get; set; }

    protected override async Task OnInitializedAsync()
    {
        multiFilterSearchModel = new Stockso.Models.Search.MultiFilterSearchModel();


        //股票信息查询菜单


        try
        {
            loadFailed = false;
            multiFilterSearchModel = await client.GetFromJsonAsync<Stockso.Models.Search.MultiFilterSearchModel>(GlobalHelper.BaseUrl + "/api/v2/MultiFilterStockKDataSearch/MultiFilterSearchModel");

        }
        catch (Exception ex)
        {
            loadFailed = true;
            Logger.LogWarning(ex, "Failed to get MultiFilterSearchModel {url}", "  await client.GetFromJsonAsync<Stockso.Models.Search.MultiFilterSearchModel>");
        }


    }

    private void HandleValidSubmit()
    {

    }

output

<form><!--!--><!--!--><!--!-->
    <!--!--><input name="AreChecked" type="checkbox" value="1">1<!--!--><br><input name="AreChecked" type="checkbox" value="2">2<!--!--><br><input name="AreChecked" type="checkbox" value="3">3<!--!--><br><input name="AreChecked" type="checkbox" value="4">4<!--!--><br><input name="AreChecked" type="checkbox" value="5">5<!--!--><br><input name="AreChecked" type="checkbox" value="6">6<!--!--><br><input name="AreChecked" type="checkbox" value="7">7<!--!--><br><input name="AreChecked" type="checkbox" value="8">8<!--!--><br><input name="AreChecked" type="checkbox" value="9">9<!--!--><br><input name="AreChecked" type="checkbox" value="10">10<!--!--><br><select><option value="On">On</option><!--!-->
            <option value="Off">Off</option></select><!--!-->
    <p>On</p><!--!-->         


        <!--!--><button type="submit">Submit</button></form>

Useful links

https://stackoverflow.com/questions/58327640/blazor-binding-to-a-multiselectlist-ideally-with-a-checkbox

How To Create A Checkbox List In Blazor step by step