How to make a single request with ajax and jquery?

Question

I have more than 50 checkbox,when I click on it, it checked the state with jquery step pro ajax bring the data from the page "home.php", but the way it is like this, I have to duplicate the code and change the id dos checkbox pro ajax go on select page bring me the return and ta leaving my huge index. I would like a solution, I don’t know much about ajax, but I want a single ajax code that will receive the values checked and make the request. Instead of duplicating the ajax and changing the id.

Jquery and AJAX

<script src="jquery-3.4.1.js"></script> 
            <script type="text/javascript">
                 $("#cartao").click(function(){
                         if($('#cartao').is(':checked')){
                            $.ajax({
                                url: "php/home_.php",  // coloque aqui o endereço que vai buscar os dados no banco         
                                success: function (data) {                                  
                                    $('#conteudo').html(data); 
                                    $('#conteudo').show(); // Mostrar o retorno em texto no html

                                      $.each(data, function (i, element) {
                                        $('#conteudo').html(element.linha_usuario); // ou assim
                                     });
                                }

                            });
                           }
                     });

            </script>

            <script type="text/javascript">
                 $("#consorcio").click(function(){
                         if($('#consorcio').is(':checked')){
                            $.ajax({
                                url: "php/select_conso.php",  // coloque aqui o endereço que vai buscar os dados no banco         
                                success: function (data) {                                  
                                    $('#conteudo_').html(data); 
                                    $('#conteudo_').show(); // Mostrar o retorno em texto no html

                                      $.each(data, function (i, element) {
                                        $('#conteudo').html(element.linha_usuario); // ou assim
                                     });
                                }

                            });
                           }
                     });

            </script>

Answer 1

I guess you already know that one id should be unique on the page so much that it is using a id for each checkbox. So far so good. But using multiple id’s in the same collection of elements is not the best use of the attribute.

Since you didn’t show the checkbox HTML, there are two better alternatives to do than using an id for each element.

If the checkbox are all in the same div, this way:

<div class="opcoes">
   <input type="checkbox" data-url="home_"> Cartão
   <input type="checkbox" data-url="select_conso"> Consórcio
</div>

You can select them as follows:

$(".opcoes :checkbox")

Note that you did not need to use any id. I have selected all checkboxes inside the div .opcoes.

I put an attribute data-url with the name of the page to be requested (only the name of the page, without the full path and without the extension .php). The value of this attribute you will pick up in AJAX according to the checkbox marked:

$(".opcoes :checkbox").click(function(){
   if(this.checked){
      $.ajax({
         url: "php/" + this.dataset.url +".php",  // coloque aqui o endereço que vai buscar os dados no banco         
         success: function (data) {                                  
            $('#conteudo').html(data); 
            $('#conteudo').show(); // Mostrar o retorno em texto no html

            $.each(data, function (i, element) {
               $('#conteudo').html(element.linha_usuario); // ou assim
            });
         }
      });
   }
});

---

Now, if the checkboxes are "spread out," meaning they don’t have a parent div in common, you could put a class in each of them, maintaining the same logic of the previous example, just changing event selector click:

Example of HTML:

<input class="opcao" type="checkbox" data-url="home_"> Cartão
<input class="opcao" type="checkbox" data-url="select_conso"> Consórcio

jQuery:

$(":checkbox.opcao").click(function(){
   if(this.checked){
      $.ajax({
         url: "php/" + this.dataset.url +".php",  // coloque aqui o endereço que vai buscar os dados no banco         
         success: function (data) {                                  
            $('#conteudo').html(data); 
            $('#conteudo').show(); // Mostrar o retorno em texto no html

            $.each(data, function (i, element) {
               $('#conteudo').html(element.linha_usuario); // ou assim
            });
         }
      });
   }
});