caixa de seleção jQuery alterar e clicar em evento


564

$(document).ready(function() {
  //set initial state.
  $('#textbox1').val($(this).is(':checked'));

  $('#checkbox1').change(function() {
    $('#textbox1').val($(this).is(':checked'));
  });

  $('#checkbox1').click(function() {
    if (!$(this).is(':checked')) {
      return confirm("Are you sure?");
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="checkbox1"/><br />
<input type="text" id="textbox1"/>

Aqui .change()atualiza o valor da caixa de texto com o status da caixa de seleção. Eu uso .click()para confirmar a ação ao desmarcar. Se o usuário selecionar cancelar, a marca de seleção é restaurada, mas é .change()acionada antes da confirmação.

Isso deixa as coisas em um estado inconsistente e a caixa de texto diz false quando a caixa de seleção está marcada.

Como posso lidar com o cancelamento e manter o valor da caixa de texto consistente com o estado da verificação?


1
Ele funciona no FF e no Chrome e tem o comportamento explicado no IE 8. Portanto, pode ser importante observar em quais navegadores você precisa trabalhar e em quais você está vendo o erro.
kasdega

Não é o melhor, mas acredito que está funcionando para mim aqui: http://jsfiddle.net/Skooljester/2Xxcn/ .
ayyp

Respostas:


904

Testado no JSFiddle e faz o que você está solicitando. Essa abordagem tem o benefício adicional de acionar quando um rótulo associado a uma caixa de seleção é clicado.

Resposta atualizada:

$(document).ready(function() {
    //set initial state.
    $('#textbox1').val(this.checked);

    $('#checkbox1').change(function() {
        if(this.checked) {
            var returnVal = confirm("Are you sure?");
            $(this).prop("checked", returnVal);
        }
        $('#textbox1').val(this.checked);        
    });
});

Resposta original:

$(document).ready(function() {
    //set initial state.
    $('#textbox1').val($(this).is(':checked'));

    $('#checkbox1').change(function() {
        if($(this).is(":checked")) {
            var returnVal = confirm("Are you sure?");
            $(this).attr("checked", returnVal);
        }
        $('#textbox1').val($(this).is(':checked'));        
    });
});

128
Apenas uma nota, é muito mais rápido para usar this.checkedem vez de $(this).is(':checked'): jsperf.com/prop-vs-ischecked/5
Dakota

37
@Dakota Concedido, é muito mais lento, mas ainda estamos falando de operações de 600k / s. Então, 600 vezes por milissegundo. Acho que se isso começar a causar problemas de desempenho em sua página da web, talvez seja necessário reavaliar seu javascript;) É bom entender as métricas de desempenho com código. Obrigado.
Mike U

51
@ MikeU: Concordo com você sobre a otimização prematura, mas considerando que this.checkedé muito mais curto escrever + javascript nativo, pode valer a pena usar em geral (além de ser ~ 200 a 300 vezes mais rápido).
Levite

11
Eu recomendaria .prop () em vez de .attr (), pois o último não funciona em todos os casos e acredito que o jQuery recomende .prop () agora.
precisa saber é o seguinte

2
Eu acho que [isso] em $ ('# textbox1'). Val (this.checked); refere-se ao documento. Deve ser $ ('# textbox1'). Val ($ ('# checkbox1'). Is (': selected'));
Yurin

90

Demo

Usar mousedown

$('#checkbox1').mousedown(function() {
    if (!$(this).is(':checked')) {
        this.checked = confirm("Are you sure?");
        $(this).trigger("change");
    }
});

Ele exibe o alerta durante a verificação e sempre me impede de verificar de fato. Isso está no Chrome.
Pimvdb

mesmo que @pimvdm. A confirmação é exibida mesmo para a ação de verificação (só deve ser exibida para desmarcar) e selecionar ok não resulta em marcar a caixa.
Professor Chaos

1
Funciona ao usar o mouse, mas não se você o estiver verificando com o teclado.
Frinux 22/02

3
@frinux Isso é simplesmente porque é uma pergunta relacionada ao mouse. Por favor, não reduza as respostas com base em sua relevância para questões totalmente separadas. Se você tiver um problema para acionar o estado de um indicador após marcar a caixa de seleção via teclado, poste uma pergunta sobre ele, em vez de diminuir o voto de forma descuidada.
Joseph Marikle

3
A votação diminuiu desde que a redução do mouse não é a única maneira de um usuário interagir com a caixa de seleção.
Jonathan

51

A maioria das respostas não será exibida (presumivelmente) se você usar <label for="cbId">cb name</label>. Isso significa que quando você clica no rótulo, ele marca a caixa em vez de clicar diretamente na caixa de seleção. (Não é exatamente a pergunta, mas vários resultados de pesquisa tendem a aparecer aqui)

<div id="OuterDivOrBody">
    <input type="checkbox" id="checkbox1" />
    <label for="checkbox1">Checkbox label</label>
    <br />
    <br />
    The confirm result:
    <input type="text" id="textbox1" />
</div>

Nesse caso, você pode usar:

Earlier versions of jQuery:

$('#OuterDivOrBody').delegate('#checkbox1', 'change', function () {
    // From the other examples
    if (!this.checked) {
        var sure = confirm("Are you sure?");
        this.checked = !sure;
        $('#textbox1').val(sure.toString());
    }
});

Exemplo do JSFiddle com o jQuery 1.6.4

jQuery 1.7+

$('#checkbox1').on('change', function() { 
    // From the other examples
    if (!this.checked) {
        var sure = confirm("Are you sure?");
        this.checked = !sure;
        $('#textbox1').val(sure.toString());
    }
});

Exemplo JSFiddle com o jQuery 2.x mais recente

  • Adicionados exemplos jsfiddle e o html com o rótulo da caixa de seleção clicável

1
É #OuterDivOrBody não .OuterDivOrBody :)
Laurent Brieu

24

Bem ... apenas para salvar uma dor de cabeça (já passou da meia-noite aqui), eu poderia pensar em:

$('#checkbox1').click(function() {
  if (!$(this).is(':checked')) {
    var ans = confirm("Are you sure?");
     $('#textbox1').val(ans);
  }
});

Espero que ajude


11

Para mim, isso funciona muito bem:

$('#checkboxID').click(function () {
    if ($(this).attr('checked')) {
        alert('is checked');
    } else {
        alert('is not checked');
    }
})

4
Me deparei com isso através de uma pesquisa na web. Você deve usar 'prop' em vez de 'attr' >> api.jquery.com/prop
Dr Schizo

11

Olha Você aqui

Html

<input id="ProductId_a183060c-1030-4037-ae57-0015be92da0e" type="checkbox" value="true">

Javascript

<script>
    $(document).ready(function () {

      $('input[id^="ProductId_"]').click(function () {

        if ($(this).prop('checked')) {
           // do what you need here     
           alert("Checked");
        }
        else {
           // do what you need here         
           alert("Unchecked");
        }
      });

  });
</script>

6

Livre-se do evento de alteração e, em vez disso, altere o valor da caixa de texto no evento de clique. Em vez de retornar o resultado da confirmação, pegue-o em uma var. Se for verdade, altere o valor. Então retorne o var.


6

Clique na caixa de seleção e verifique se o valor no mesmo loop de eventos é o problema.

Tente o seguinte:

$('#checkbox1').click(function() {
    var self = this;
    setTimeout(function() {

        if (!self.checked) {
            var ans = confirm("Are you sure?");
            self.checked = ans;
            $('#textbox1').val(ans.toString());
        }
    }, 0);
});

Demo: http://jsfiddle.net/mrchief/JsUWv/6/


6

se você estiver usando o iCheck Jquery, use o código abaixo

 $("#CheckBoxId").on('ifChanged', function () {
                alert($(this).val());
            });

5

Tente isto

$('#checkbox1').click(function() {
        if (!this.checked) {
            var sure = confirm("Are you sure?");
            this.checked = sure;
            $('#textbox1').val(sure.toString());
        }
    });

5
$(document).ready(function() {
    //set initial state.
    $('#textbox1').val($(this).is(':checked'));

    $('#checkbox1').change(function() {
        $('#textbox1').val($(this).is(':checked'));
    });

    $('#checkbox1').click(function() {
        if (!$(this).is(':checked')) {
            if(!confirm("Are you sure?"))
            {
                $("#checkbox1").prop("checked", true);
                $('#textbox1').val($(this).is(':checked'));
            }
        }
    });
});

4
// this works on all browsers.

$(document).ready(function() {
    //set initial state.
    $('#textbox1').val($(this).is(':checked'));

    $('#checkbox1').change(function(e) {
        this.checked =  $(this).is(":checked") && !!confirm("Are you sure?");
        $('#textbox1').val(this.checked);
        return true;
    });
});

4
$('#checkbox1').click(function() {
    if($(this).is(":checked")) {
        var returnVal = confirm("Are you sure?");
        $(this).attr("checked", returnVal);
    }
    $('#textbox1').val($(this).is(':checked')); 
});


<div id="check">
    <input type="checkbox" id="checkbox1" />
    <input type="text" id="textbox1" />
</div>

4

Resposta tardia, mas você também pode usar on("change")

$('#check').on('change', function() {
     var checked = this.checked
    $('span').html(checked.toString())
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="check" > <span>Check me!</span>


1

basta usar o evento click, meu ID da caixa de seleção é CheckAll

     $('#CheckAll').click(function () {

        if ($('#CheckAll').is(':checked') == true) {

             alert(";)");
      }
    }

1

obter valor do rádio por nome

 $('input').on('className', function(event){
        console.log($(this).attr('name'));
        if($(this).attr('name') == "worker")
            {
                resetAll();                 
            }
    });

1

Não sei por que todo mundo está fazendo isso tão complicado. Foi tudo o que fiz.

if(!$(this).is(":checked")){ console.log("on"); }

-1
 $("#person_IsCurrentAddressSame").change(function ()
    {
        debugger
        if ($("#person_IsCurrentAddressSame").checked) {
            debugger

        }
        else {

        }

    })

3
As respostas somente de código são consideradas de baixa qualidade: forneça uma explicação sobre o que seu código faz e como ele resolve o problema. Isso ajudará tanto os leitores quanto os futuros leitores, se você puder adicionar mais informações em sua postagem. Consulte também Explicando respostas inteiramente baseadas em código: meta.stackexchange.com/questions/114762/…
borchvm
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.