jQuery: Teste se a caixa de seleção NÃO está marcada


110

Estou tendo problemas para descobrir isso. Tenho duas caixas de seleção (no futuro, terei mais):

  • checkSurfaceEnvironment-1
  • checkSurfaceEnvironment-2

Basicamente, quero escrever uma instrução if e testar se uma delas está marcada e outra NÃO. Qual é a maneira mais fácil de fazer o seguinte:

if ( $("#checkSurfaceEnvironment-1").attr('checked', true) &&
     $("#checkSurfaceEnvironment-2").is('**(NOT??)** :checked') ) {
        // do something
}

3
Use ||não &&para verificar se alguma das opções está marcada. &&verifica se ambos estão marcados.
j08691

Respostas:


213

Uma maneira confiável que uso é:

if($("#checkSurfaceEnvironment-1").prop('checked') == true){
    //do something
}

Se você quiser iterar sobre os elementos marcados use o elemento pai

$("#parentId").find("checkbox").each(function(){
    if ($(this).prop('checked')==true){ 
        //do something
    }
});

Mais informações:

Isso funciona bem porque todas as caixas de seleção têm uma propriedade marcada que armazena o estado real da caixa de seleção. Se desejar, você pode inspecionar a página e tentar marcar e desmarcar uma caixa de seleção, e você notará que o atributo "marcado" (se presente) permanecerá o mesmo. Este atributo representa apenas o estado inicial da caixa de seleção, e não o estado atual . O estado atual é armazenado na propriedade marcada do elemento dom para essa caixa de seleção.

Veja Propriedades e Atributos em HTML


2
Umm ... isso vai definirchecked = true
Naftali, também conhecido como Neal

@Pablo - Verifique minha resposta abaixo, que também é uma opção confiável / apt.
Aneesh Vijendran

@PabloMescher Ei, você pode me ajudar? Na verdade, quero determinar quais caixas de seleção estão marcadas entre várias? E, habilite / desabilite a caixa de texto ao lado dela. Qualquer ajuda será muito apreciada.
1lastBr3ath

@ 1lastBr3ath claro, se você estiver usando jQuery, você só precisa encontrar um seletor para a caixa de texto relativa à caixa de seleção e usar meu segundo exemplo. Seria algo como if ($ (this) .prop ('verificado')) {$ (this) .find ("<textboxSelector>") .attr ("disabled", true); }
Pablo Mescher

1
@Stophface, neste caso, esta propriedade sempre será um booleano, pois é uma propriedade computada e não uma string, então você pode usar ==. É aconselhável usar sempre ===, pois nem sempre é o caso
Pablo Mescher

77
if (!$("#checkSurfaceEnvironment-1").is(":checked")) {
    // do something if the checkbox is NOT checked
}

31

Você também pode usar o .not()método ou :not()seletor jQuery :

if ($('#checkSurfaceEnvironment').not(':checked').length) {
    // do stuff for not selected
}

Exemplo JSFiddle


Notas Adicionais

Na documentação da API jQuery para o :not() seletor :

O método .not () acabará fornecendo a você seleções mais legíveis do que colocar seletores ou variáveis ​​complexas em um filtro seletor : not () . Na maioria dos casos, é a melhor escolha.


1
! $ ("# checkSurfaceEnvironment"). is (": checked") retorna um booleano. É verdade se a caixa de seleção não estiver marcada. $ ('# checkSurfaceEnvironment'). not (': checked') retorna uma matriz de elementos DOM. Testar isso com 'if' retorna 'true' mesmo se não houver correspondência com o seletor e a matriz estiver vazia. A única maneira de sua resposta estar correta é se você testou i $ ('# checkSurfaceEnvironment'). Not (': verificado'). Length, que retornará 0 ou 1.
Thibault Witzig

22

Uma forma alternativa:

Aqui está um exemplo prático e aqui está o código, você também deve usar prop.

$('input[type="checkbox"]').mouseenter(function() { 
    if ($(this).is(':checked')) {
        //$(this).prop('checked',false);
        alert("is checked");
    } else {
         //$(this).prop('checked',true);
        alert("not checked");
    }
});​

Eu comentei a maneira de alternar o atributo marcado.


9
if ( $("#checkSurfaceEnvironment-1").is(":checked") && $("#checkSurfaceEnvironment-2").not(":checked") )

6

Eu estava procurando uma implementação mais direta, como o avijendr sugeriu.

Tive um pequeno problema com a sintaxe dele, mas fiz isso funcionar:

if ($('.user-forms input[id*="chkPrint"]:not(:checked)').length > 0)

No meu caso, eu tinha uma mesa com uma classe user-forms, e eu estava verificando se qualquer uma das caixas que tiveram a corda checkPrintem seu ideram desmarcada.


5

Acho que a maneira mais fácil (com jQuery) de verificar se a caixa de seleção está marcada ou NÃO é:

se 'marcado':

if ($(this).is(':checked')) {
// I'm checked let's do something
}

se NÃO 'marcado':

if (!$(this).is(':checked')) {
// I'm NOT checked let's do something
}

4

Aqui eu tenho um trecho para esta pergunta.

$(function(){
   $("#buttoncheck").click(function(){
        if($('[type="checkbox"]').is(":checked")){
            $('.checkboxStatus').html("Congratulations! "+$('[type="checkbox"]:checked').length+" checkbox checked");
        }else{
            $('.checkboxStatus').html("Sorry! Checkbox is not checked");
         }
         return false;
   })
    
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <p>
    <label>
      <input type="checkbox" name="CheckboxGroup1" value="checkbox" id="CheckboxGroup1_0">
      Checkbox</label>
    <br>
    <label>
      <input type="checkbox" name="CheckboxGroup1_" value="checkbox" id="CheckboxGroup1_1">
      Checkbox</label>
    <br>
  </p>
  <p>
    <input type="reset" value="Reset">
    <input type="submit" id="buttoncheck" value="Check">
  </p>
  <p class="checkboxStatus"></p>
</form>


3

Para fazer .attr()como você fez, para ver se está checado seria .attr("checked", "checked"), e se não estiver seria.attr("checked") == undefined


1

Retorna verdadeiro se todas as checbox são verificadas em um div

function all_checked (id_div){
 all_checked = true;

 $(id_div+' input[type="checkbox"]').each(function() { 
    all_checked = all_checked && $('this').prop('checked');
 }

 return all_checked;
}

1

Simples e fácil de verificar ou condição não verificada

<input type="checkbox" id="ev-click" name="" value="" >

<script>
    $( "#ev-click" ).click(function() {
        if(this.checked){
            alert('checked');
        }
        if(!this.checked){
            alert('Unchecked');
        }
    });
</script>

1

tente este

if ($("#checkSurfaceEnvironment-1:checked").length>0) {
    //your code in case of NOT checked
}

No código Acima, selecione o elemento por Id e, em (#checkSurfaceEnvironment-1)seguida, filtre seu estado verificado por (:checked)filtro.

Ele retornará a matriz do objeto de elemento verificado. Se houver algum objeto na matriz, a condição será satisfeita.


Embora sua resposta possa ajudar, você deve pelo menos explicar o porquê. Como está, sua resposta foi passada para a fila de moderação de Postagens de baixa qualidade (que é onde a estou visualizando). Sugiro que você edite sua resposta para adicionar uma explicação.
Chris Spittles

1

Existem duas maneiras de verificar a condição.

if ($("#checkSurfaceEnvironment-1").is(":checked")) {
    // Put your code here if checkbox is checked
}

OU você pode usar este também

if($("#checkSurfaceEnvironment-1").prop('checked') == true){
    // Put your code here if checkbox is checked
}

Espero que seja útil para você.


1

Aqui está a maneira mais simples fornecida

 <script type="text/javascript">

        $(document).ready(function () {
            $("#chk_selall").change("click", function () {

                if (this.checked)
                {
                    //do something
                }
                if (!this.checked)
                {
                    //do something

                }

            });

        });

    </script>

0

Eu usei isso e funcionou para mim!

$("checkbox selector").click(function() {
    if($(this).prop('checked')==true){
       do what you need!
    }
});

0

Eu sei que isso já foi respondido, mas ainda assim, esta é uma boa maneira de fazer isso:

if ($("#checkbox").is(":checked")==false) {
    //Do stuff here like: $(".span").html("<span>Lorem</span>");
}

0
if($("#checkbox1").prop('checked') == false){
    alert('checkbox is not checked');
    //do something
}
else
{ 
    alert('checkbox is checked');
}

4
Embora possa responder à pergunta do autor, faltam algumas palavras explicativas e / ou links para a documentação. Trechos de código bruto não são muito úteis sem algumas frases em torno deles. Você também pode descobrir como escrever uma boa resposta muito útil. Edite sua resposta - Da avaliação
Nick

-4
$("#chkFruits_0,#chkFruits_1,#chkFruits_2,#chkFruits_3,#chkFruits_4").change(function () {
        var item = $("#chkFruits_0,#chkFruits_1,#chkFruits_2,#chkFruits_3,#chkFruits_4");
    if (item.is(":checked")==true) {
        //execute your code here
    }

    else if (item.is(":not(:checked)"))
    {
        //execute your code here
    }

});
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.