How to select multiple radios button in the same column of an html table?

Asked

Viewed 442 times

1

I have a table html with 3 columns and 3 rows and when I select, for example radio button of line number 2 the line number 1 unchecks.

 @if (Model != null && Model.Tabela1!= null && Model.Tabela1.Count > 0)
                        {
                            for (int i = 0; i < Model.Tabela1.Count; i++)
                            {
    <table id="tbl" class="table table-bordered table-hover dataTable">
        <thead>
            <tr role="row">
                <th>Inserir</th>
                <th>Excluir</th>
                <th>Descrição</th>
            </tr>
        </thead>
        <tbody>    
            <tr role="row" data-row-index="0">
                <td data-id="@Model.Tabela1[i].id"><input name="chkSelecionar" id="chkSelecionaInsere" type="radio"/></td>
                <td data-id="@Model.Tabela1[i].id"><input name="chkSelecionar" id="chkSelecionaExcluir" type="radio"/></td>
                <td>@Model.Tabela1.descricao</td>
            </tr>

}
                        }
        </tbody>
    </table>

Note: In case it was feasible I could change the Radio button for the Checkbox.

  • for that there are the checkbox

1 answer

4


For this not to happen you have to change their name, otherwise the browser interprets as if it were 1:

<table id="tbl" class="table table-bordered table-hover dataTable">
    <thead>
        <tr role="row">
            <th>Inserir</th>
            <th>Excluir</th>
            <th>Descrição</th>
        </tr>
    </thead>
    <tbody>    
        <tr role="row" data-row-index="0">
            <td data-id="1"><input name="chkSelecionar0" id="chkSelecionaInsere0" type="radio"/></td>
            <td data-id="1"><input name="chkSelecionar0" id="chkSelecionaExcluir0" type="radio"/></td>
            <td>@Model.descricao</td>
        </tr>
        <tr role="row" data-row-index="0">
            <td data-id="2"><input name="chkSelecionar1" id="chkSelecionaInsere1" type="radio"/></td>
            <td data-id="2"><input name="chkSelecionar1" id="chkSelecionaExcluir1" type="radio"/></td>
            <td >@Model.descricao</td>
        </tr>
        <tr role="row" data-row-index="0">
            <td data-id="3"><input name="chkSelecionar2" id="chkSelecionaInsere2" type="radio"/></td>
            <td data-id="3"><input name="chkSelecionar2" id="chkSelecionaExcluir2" type="radio"/></td>
            <td>@Model.descricao</td>
        </tr>
    </tbody>
</table>
  • 1

    Consider changing the id as well, for id should always be unique

  • True, I’ll change the answer, thank you.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.