form-check-input (check if no option has been selected)

Asked

Viewed 166 times

0

reference link: http://www.dapweb.org/dapdaniel/rosiane/temporada.php

I have a form with some options arranged in check boxes, to change them according to the click I am using AJAX, the following code:

function function1() {
  $('.form-check-input').on('change', function() {
    $('.form-check-input').not(this).prop('checked', false);

    $.ajax({
      url: "ajax/temporadacheckbox.php",
      type: "POST",
      async: true,
      cache: false,
      data: {
        tipo: $('input:checkbox:checked').val()
      },
      success: function(data) {
        $("#grid").hide(),
          $('#grid2').html(data);
      }
    });
  });
}

The div grid2, comes correctly and dynamically from another PHP page.

Example of dynamic div:

<div class="product-item bg-light">
<div class="card">
    <div class="thumb-content">
        <!-- <div class="price">$200</div> -->
        <a href="resumo.php?cidade=$cid&categoria=temporadas&id=$id">
            <img class="card-img-top img-fluid" src="imagens/$foto" alt="Card image cap">
        </a>
    </div>
    <div class="card-body">
        <h4 class="card-title"><a href="resumo.php?cidade=$cid&categoria=temporadas&id=$id">$nome</a></h4>
        <ul class="list-inline product-meta">
            <li class="list-inline-item">
                <a href="resumo.php?cidade=$cid&categoria=temporadas&id=$id"><i class="fa fa-folder-open-o"></i>Hospedagens</a>
            </li>

        </ul>
        <p class="card-text">$texto</p>
        <div class="product-ratings">
            <ul class="list-inline">
                <li class="list-inline-item selected"><i class="fa fa-star"></i></li>
                <li class="list-inline-item selected"><i class="fa fa-star"></i></li>
                <li class="list-inline-item selected"><i class="fa fa-star"></i></li>
                <li class="list-inline-item selected"><i class="fa fa-star"></i></li>
                <li class="list-inline-item"><i class="fa fa-star"></i></li>
            </ul>
        </div>
    </div>
</div>

The two run inside a form, which fill in the information according to the request, the grid2 div, must only filter the selected category.

I wish that when the user has no check box checked, I show the original div, the div grid, how can I do?

php javascript ajax checkbox
  • 1

    explain better what you want to do, I didn’t understand very well.

  • I have a form with some input check box, from which you can only select one at a time, when you click one option and switch to another, it loads the div corresponding to the checkbox that you selected correctly. However, when there is no checkbox selected, it shows nothing. I want to show the original div when nothing is selected. Note: when entering the page, before selecting any check, it shows the div that I want to display, only after selecting any of them and undo the selection that the displayed div is empty.

  • Let me get this straight, div with the id=grid corresponds to div What do you want to show when there is no checkbox selected?! Right??

2 answers

1


Add the event of click directly at the checkbox.

$('input:checkbox').click(function() {

    $('input:checkbox').not(this).prop('checked', false);

    if ($(this).is(':checked')) {
        changeByTipo($(this).val());
    } else {
        $('#grid').show();
        $('#grid2').empty().hide();
    }
});

function changeByTipo(tipo) {
    $.ajax({
        url: "ajax/temporadacheckbox.php", 
        type: "POST",
        async: true,
        cache: false,
        data: { tipo : tipo },
        success: function(data) {
            $("#grid").hide();
            $('#grid2').html(data).show();
        }
    });
};

  • friend, also did not work correctly, he should mark only one checkbox at a time, not allowing more than one to be selected, and when there is none selected he keeps showing me the last call of the dynamic page, at least now, the div is not empty, but when they are zeroed, I want to show the original div.

  • look at the page to understand: http://www.dapweb.org/dapdaniel/rosiane/temporada.php

  • I get it now @Danielgomesdasilvamoreira. Take a look at the update I made. If possible, leave your checkbox and grid HTML code to analyze :)

  • Buddy, take a look now, it’s almost!!! what happens is that after leaving empty I click again, it does not return: http://www.dapweb.org/dapdaniel/rosiane/temporada.php

  • the html code of the page is kind of extensive, has enough php, I tried to copy here and it did not fit : /

  • I updated again!!! The problem is that I’m answering by cell phone and I can’t test :(

  • Poxa!! you are very close indeed, the previous problem persists: http://www.dapweb.org/dapdaniel/rosiane/temporada.php

  • when I uncheck them all, I can’t select again : /

  • 1

    I forgot to add the method show() on the grid that displays the request data. Test now @Danielgomesdasilvamoreira.

  • 1

    Funcionou Vitor!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! Boa!!!!!!!!!!!!!!!!!!!!!!!! Parabéns, muitissimo obrigado mano!

  • 1

    Let’s go continue this discussion in chat.

  • please, I need your help!

Show 7 more comments

0

Although I didn’t quite understand your question I wrote a script that might help you.

To check if no checkbox has been selected you have to use the declaration if/Else , as the example below.

Example:

$('.form-check-input').on('change', function() {

  $('.form-check-input').not(this).prop('checked', false);
  let inputCheckedValue = $('.check-input:checkbox:checked').val(); // valor do último input selecionado

  if (inputCheckedValue) { // Pelo menos um checkbox foi selecionado: Faça a requisição
    // ...
    $.ajax({
      url: "ajax/temporadacheckbox.php",
      type: "POST",
      async: true,
      cache: false,
      data: {
        tipo: inputCheckedValue
      },
      success: function(data) {
        $("#grid").hide();
        $('#grid2').html(data);
      }
    });
    // ...
  } else { // Nenhum checkbox foi selecionado: mostra a div original
    $("#grid").show(); // Mostrar a div original
    $('#grid2').empty().hide(); // Limpar e esconder a div dinâmica
    // ...
  }  
})

  • did not work friend, semantically must have something wrong, but the logic of the if and Else already gave me a light here, unfortunately, as the points of the reward are high, I will pass them to those who answer me the closest to the compileable.

  • if you help, here is the link to the page: http://www.dapweb.org/dapdaniel/rosiane/temporada.php

  • in fact, just the return of Else that is not correct, I will send you as the code was here

  • Function function1() { $('. form-check-input'). on('change', Function() { Let inputCheckedValue = $('. form-check-input'). not(this). prop('checked', false); if(inputCheckedValue) {$. ajax({ url: "ajax/temporadacheckbox.php", type: "POST", async: true, cache: false, data: { type :$('input:checkbox:checked'). val()}, Success: Function(data){ $("#grid"). Hide(), $("#pagination"). Hide(), $('#grid2'). html(data);} }); Else { $("#grid"). show(), $('#grid2'). Empty(). Hide(); // Clear and hide the dynamic div // ... } });}

Browser other questions tagged php javascript ajax checkbox

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