Mark checkbox with returns in DIV

Asked

Viewed 131 times

1

In this form:

<input type="checkbox" value="1" data-id=1" name="status_entrega" id="status_entrega">
<div id="retorno_1" style="display:none; float:left">Atualizado</div>

<input type="checkbox" value="1" data-id=2" name="status_entrega" id="status_entrega">
<div id="retorno_2" style="display:none; float:left">Atualizado</div>

I got the following jQuery:

$('#status_entrega').click(function(){
    var id_pedido = $("#status_entrega").attr("data-id");
    $("#retorno_"+id_pedido).toggle(this.checked);
});

However, the first item I can mark as checked, the second and the others, I can’t even check... Does not return the update message. Someone can help?

Updating:

As Sergio help, I modified, but I need to, when unchecking, also send the update request. Follow the updated code:

$('[name="status_entrega"]').click(function() {
    var id_pedido = $(this).attr("data-id");
    $("#retorno_" + id_pedido).toggle(this.checked);

    $.ajax({
        type: 'post',
        url: '../ajax/getTransacaoOK',
        success: function (response) {

            $("#retorno_" + id_pedido).html("Atualizando...");
            setTimeout(function(){

                $("#retorno_" + id_pedido).html("Atualizado!");

                setTimeout(function(){
                    $("#retorno_" + id_pedido).html("");
                },1000);

            },2000);    
        },
    });         
});
jquery

1 answer

1


You have duplicate Ids... they have to be unique.

You can use the name="status_entrega" as selector and do so:

$('[name="status_entrega"]').click(function() {
    var id_pedido = $(this).attr("data-id");
    $("#retorno_" + id_pedido).toggle(this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
    <input type="checkbox" value="1" data-id="1" name="status_entrega" id="status_entrega">
    <div id="retorno_1" style="display:none; float:left">Atualizado</div>
</section>
<section>
    <input type="checkbox" value="1" data-id="2" name="status_entrega" id="status_entrega">
    <div id="retorno_2" style="display:none; float:left">Atualizado</div>
</section>

  • 1

    Perfect solution. Thank you! :)

  • I made an adjustment on it, but when click back, it needs to send the action again... example, checked, sent action, unchecked, sent action again.... but when unchecking, do not send, updated my code.

  • 1

    @Andrébaill does, but it’s hidden. But to make it even better, you could do it like this: https://jsfiddle.net/m443k17f/

  • Ok, then I pass the order id, I do inside ajax... date: id_request? :)

  • 1

    @Andrébaill data: {id_pedido: id_pedido}

  • In this case @Sergio, I will send 1 if it is active and 0 is inactive, so I need to pass what is the value of the checkbox?

  • This var status_delivery = $("status_delivery"). val(); should solve right? Because then I get the value of the checkbox

  • 1

    @Andrébaill data: {id_pedido: id_pedido, estado: this.checked},

  • Ahh cool, right, I’ll try.

Show 4 more comments

Browser other questions tagged jquery

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