MVC 4 mark all checkboxes

Question

MVC 4 mark all checkboxes

Navigation

#1 by (3 votes)

1

Good morning,

I'm doing a project in mvc4 razor, and in a view I need to show a table. So far so good, the problem comes when I have to put a checkbox in the header and one in each element of the table and the first checkbox mark all others.

The header would be something like this:

@Html.CheckBox("ticTodos") &nbsp;Seleccionar</th>

and the body this:

<td class="text-center">@Html.CheckBox("ticDevolver")</td>

c# asp.net-mvc razor

asked by Zarios 22.06.2016 в 09:58

source

1 answer

CSS: overflow: hidden does not work for me in the figure tag Link two tables in MySQL

score 3 · Accepted Answer

There are several ways to make this feature work, here I present one using pure JavaScript :

<div class="row">
    <div class="col-md-12">
        <div id="checkboxOptions">   
            @Html.CheckBox("CheckTodos", new { @onclick = "checkAll();" }) &nbsp;Seleccionar Todos
            <br />        
            @Html.CheckBox("CheckA") &nbsp;OpcionA
            <br />
            @Html.CheckBox("CheckB") &nbsp;OpcionB        
        </div>
    </div>
</div>

<script>
    function checkAll() {
        var checkeado = document.getElementById('CheckTodos').checked;
        var checkBoxsList = document.getElementById('checkboxOptions').getElementsByTagName('input');
        if (checkeado) {
            for (var i = 0; i < checkBoxsList.length; i++) {
                checkBoxsList[i].checked = true;
            }
        }
        else {
            for (var i = 0; i < checkBoxsList.length; i++) {
                checkBoxsList[i].checked = false;
            }
        }
    }
</script>