Send multiple values from my Checkbox to an Ajax call

Question

I have a button that when I click calls my ajax function. I want to send the values that were selected in my checkbox.But what comes to my controller is only the first value of my Checkbox.,

Domingo

And you should send all the user-selected values of the type

Domingowednesday

Possible problem:

 var myCheckboxes = new Array();
            $("input:checked").each(function () {
                myCheckboxes.push($(this).val());
            });

Script:

  $(document).ready(function () {       
        var itensCatequizandos = $("#SelectedCatequizandos");

        itensCatequizandos.empty();
        $("#procurarCatequizandos").click(function () {
            itensCatequizandos.empty();

            var myCheckboxes = new Array();
            $("input:checked").each(function () {
                myCheckboxes.push($(this).val());
            });

                $.ajax({
                    type: 'POST',
                    url: '@Url.Action("GetCatequizandosByDiasDisponiveis")', // chamar o metodo em json
                    dataType: 'json',
                    data: { diasPertendidos: myCheckboxes },
                    success: function (catequizandos) {
                        $.each(catequizandos, function (i, catequizando) {
                            itensCatequizandos.append('<option value="' + catequizando.PessoaID + '">' + catequizando.Nome + '</option>');
                        });
                    },
                    error: function (ex) {
                    }
                });        
        });

    });

Html:

<div class="modal-body">
<input type="button" id="procurarCatequizandos" name="procurarCatequizandos" value="Procurar" class="btn btn-primary" />
<br />
<input type="checkbox" name="myCheckboxes[]" value="Domingo" class="checkbox-inline" />
@Html.Label("Domingo", new { @class = "control-label" })
<br />
<input type="checkbox" name="myCheckboxes[]" value="Segunda-Feira" class="checkbox-inline" />
@Html.Label("Segunda-Feira", new { @class = "control-label" })
<br />
<input type="checkbox" name="myCheckboxes[]" value="Terça-Feira" class="checkbox-inline" />
@Html.Label("Terça-Feira", new { @class = "control-label" })
<br />
<input type="checkbox" name="myCheckboxes[]"   value="Quarta-Feira" class="checkbox-inline" />
@Html.Label("Quarta-Feira", new { @class = "control-label" })
<br />
<input type="checkbox" name="myCheckboxes[]"   value="Quinta-Feira" class="checkbox-inline" />
@Html.Label("Quinta-Feira", new { @class = "control-label" })
<br />
<input type="checkbox" name="myCheckboxes[]"  value="Sexta-Feira" class="checkbox-inline" />
@Html.Label("Sexta-Feira", new { @class = "control-label" })
<br />
<input type="checkbox" name="myCheckboxes[]" value="Sábado" class="checkbox-inline" />
@Html.Label("Sábado", new { @class = "control-label" })                                           
</div>

Answer 1

Friend your code is correct, just add one traditional: true your ajax that everything will work.

The attributetraditional changes the way data is sent to server, without it ASP.NET cannot bind because the data go like this:

'diasPertendidos[]="Segunda"&diasPertendidos[]="Quarta"&diasPertendidos[]="Quinta'

Already with it enabled the data will go this way:

diasPertendidos="Segunda"&diasPertendidos="Quarta"&diasPertendidos="Quinta"

Javascript:

$.ajax({
    type: 'POST',
    url: '@Url.Action("GetCatequizandosByDiasDisponiveis")', // chamar o metodo em json
    dataType: 'json',
    data: { diasPertendidos: myCheckboxes },
    traditional: true,
    //succes and error
});

Action:

[HttpPost]
public ActionResult GetCatequizandosByDiasDisponiveis(string[] diasPertendidos)
{
    return null;
}