Problems making ajax call with checkbox

Question

Problems making ajax call with checkbox

Navigation

#1 by (3 votes)
#2 by (2 votes)

0

I have several checkbox that will make an ajax call, but only the first checkbox is calling. Any solution in the IDs for this list to make the same ajax call?

Script:

<script>   
    $(document).ready(function () {          
        $("#SelectDias").click(function () {

             //chamada Ajax    
            } else {

            }
        });

    });
</script>

Html:

<input type="checkbox" id="SelectDias" name="SelectDias" value="Domingo" class="checkbox-inline" />
 @Html.Label("Domingo", new { @class = "control-label" })
<br />
<input type="checkbox" id="SelectDias" name="SelectDias" value="Segunda-Feira" class="checkbox-inline" />
@Html.Label("Segunda-Feira", new { @class = "control-label" })
 <br />
<input type="checkbox" id="SelectDias" name="SelectDias" value="Terça-Feira" class="checkbox-inline"  />
@Html.Label("Terça-Feira", new { @class = "control-label" })
<br />
<input type="checkbox" id="SelectDias" name="SelectDias" value="Quarta-Feira" class="checkbox-inline" />
@Html.Label("Quarta-Feira", new { @class = "control-label" })
<br />
<input type="checkbox" id="SelectDias" name="SelectDias" value="Quinta-Feira" class="checkbox-inline" />
@Html.Label("Quinta-Feira", new { @class = "control-label" })
<br />
<input type="checkbox" id="SelectDias" name="SelectDias" value="Sexta-Feira" class="checkbox-inline"  />
@Html.Label("Sexta-Feira", new { @class = "control-label" })
<br />
<input type="checkbox" id="SelectDias" name="SelectDias" value="Sábado" class="checkbox-inline" />
@Html.Label("Sábado", new { @class = "control-label" })

javascript html jquery ajax

asked by anonymous 14.04.2016 / 18:31

2 answers

2

Giving an improvement in Gabriel's response, you have to define a class, as in his own example, day-of-week . And within your click event method you get the instance of the checkbox that was clicked to use the value you selected:

<script>   
    $(document).ready(function () {          
        $(".dia-da-semana").click(function () {
            var instanciaCheckboxClicada = $(this);
            var valorCheckboxClicado = instanciaCheckboxClicada.val();
             //chamada Ajax passando a variavel valorCheckboxClicado
        });

    });
</script>

14.04.2016 / 19:12

How to change text smoothly? What is the best way to assemble this layout?

score 3 · Accepted Answer

The id attribute serves (as its name says) as a unique ID for the page, should not have two elements in the same frame with the same id. Instead of $ ("# SelectDias") you'd prefer to use $ (". Checkbox-inline") , if you have any input class checkbox-inline and it is not part of SelectDias , consider creating a class specific to it, such as a class day-of-week .