Verifique se a caixa de seleção está marcada com jQuery

1189

Como posso verificar se uma caixa de seleção em uma matriz de caixas de seleção está marcada usando o ID da matriz de caixas de seleção?

Estou usando o código a seguir, mas ele sempre retorna a contagem de caixas de seleção, independentemente da identificação.

function isCheckedById(id) {
    alert(id);
    var checked = $("input[@id=" + id + "]:checked").length;
    alert(checked);

    if (checked == 0) {
        return false;
    } else {
        return true;
    }
}
Jake
fonte
Uma matriz de caixa de seleção ? Nunca ouvi falar de uma coisa dessas. Isso é algo específico do JQuery ou um plugin / widget?
Pekka
2
uma matriz de caixa de seleção significa algo como: <input type = "checkbox" name = "chk []" id = "chk []" value = "apple"> <input type = "checkbox" name = "chk []" id = "chk []" value = "banana"> <input type = "checkbox" name = "chk []" id = "chk []" value = "orange"> etc ..
Jake
2
o que há de errado com uma matriz de caixa de seleção? de que outra forma você faria uma entrada "marque todas as opções aplicáveis"?
nickf
5
Verifique se os seus ids são únicos! namepode (e deve, nesse caso) repetir, mas você encontrará muitas coisas estranhas acontecendo se duplicar o arquivo id! = D
Jeff Rupert
Eu tive que remover o "@" para que ele funcionasse. Além disso, você pode minificar as últimas 5 linhas para 1: return (marcado! = 0);
B. Clay Shannon

Respostas:

689

Os IDs devem ser exclusivos no seu documento, o que significa que você não deve fazer isso:

<input type="checkbox" name="chk[]" id="chk[]" value="Apples" />
<input type="checkbox" name="chk[]" id="chk[]" value="Bananas" />

Em vez disso, solte o ID e selecione-os por nome ou por um elemento que contenha:

<fieldset id="checkArray">
    <input type="checkbox" name="chk[]" value="Apples" />

    <input type="checkbox" name="chk[]" value="Bananas" />
</fieldset>

E agora o jQuery:

var atLeastOneIsChecked = $('#checkArray:checkbox:checked').length > 0;
//there should be no space between identifier and selector

// or, without the container:

var atLeastOneIsChecked = $('input[name="chk[]"]:checked').length > 0;
nickf
fonte
Para mim, trabalhou sem aspas duplas no nome da entrada: input [name = multiplecheck []]: verificado, obrigado!
Alejandro Quiroz 20/05
30
Por que usar $('#checkArray :checkbox:checked').length > 0;quando o mais simples $('#checkArray').checkedfunciona e está disponível em mais versões?
Don Cheadle
5
@ Oddman ele funciona, mas não em um objeto jquery. em vez de $ (elem) .checked, tente elem.checked.
Dan Williams
1
@ DanWilliams sim, mas não no exemplo que a mmcrae deu.
Oddman
O segundo funcionou para mim. Obrigado!! var atLeastOneIsChecked = $('input[name="chk[]"]:checked').length > 0;
David Silva-Barrera
2026
$('#' + id).is(":checked")

Isso acontece se a caixa de seleção estiver marcada.

Para uma variedade de caixas de seleção com o mesmo nome, é possível obter a lista de caixas marcadas da seguinte forma:

var $boxes = $('input[name=thename]:checked');

Em seguida, para percorrê-los e ver o que está marcado, você pode fazer:

$boxes.each(function(){
    // Do stuff here with this
});

Para descobrir quantos estão marcados, você pode fazer:

$boxes.length;
John Boker
fonte
2
Outra maneira é $('#'+id).attr('checked'), que é equivalente, $('#' + id).is(":checked")mas mais fácil de lembrar, da IMO.
Zubin
85
@Zubin: Tenha cuidado com .attr('checked'). Seu comportamento mudou no jQuery 1.6. Costumava retornar falseou true. Agora ele retorna undefinedou "checked". .is(':checked')não tem esse problema.
Joey Adams
1
@ John Boker: desculpe pelo comentário necro, mas por que $('.ClassName').is(':checked')parece que não funciona, mas $('#' + id).is(":checked")funciona? além do fato de que uma pesquisa por id e outra por classname.
Mike_OBrien
@Mike_OBrien O problema pode ser que haja mais de uma caixa de seleção com esse nome de classe. O is (': marcado') realmente funciona apenas em um elemento.
precisa saber é o seguinte
5
Nota: size () está obsoleto desde o jQuery 1.8 - use .length em vez disso
JM4
312
$('#checkbox').is(':checked'); 

O código acima retorna true se a caixa de seleção estiver marcada ou false se não estiver.

Prasanna Rotti
fonte
7
muito útil ao usar $ (this) .is (': marcado'); Obrigado!
PinoyStackOverflower
Desta forma é útil para verificar se opção for assinalada, onde você sabe como selecioná-lo, obrigado
Omar eu disse
Isso funcionou para mim, eu usei isso antes, var isChecked = $('#CheckboxID').attr('checked') ? true : false; mas nem sempre retornava o valor correto. Então obrigado!
leiit
121

Todos os métodos a seguir são úteis:

$('#checkbox').is(":checked")

$('#checkbox').prop('checked')

$('#checkbox')[0].checked

$('#checkbox').get(0).checked

É recomendável evitar DOMelement ou inline "this.checked". Em vez disso, jQuery no método deve ser usado como ouvinte de eventos.

justnajm
fonte
98

Código jQuery para verificar se a caixa de seleção está marcada ou não:

if($('input[name="checkBoxName"]').is(':checked'))
{
  // checked
}else
{
 // unchecked
}

Alternativamente:

if($('input[name="checkBoxName"]:checked'))
{
    // checked
}else{
  // unchecked
}
Kundan roy
fonte
4
A primeira solução está faltando :... correto é: if(('input[name="checkBoxName"]').is(':checked')).
Aerendir 19/10/16
Faltando cifrão ($), deve ser if($('input[name="checkBoxName"]').is(':checked')).
Penny Liu
O segundo nunca executará o elsebloco, pois um objeto jQuery, mesmo que não contenha elementos correspondentes, é "verdadeiro". Adicione .lengthao final, então você está falando.
Heretic Monkey
69

O conceito mais importante a ser lembrado sobre o atributo verificado é que ele não corresponde à propriedade marcada. O atributo realmente corresponde à propriedade defaultChecked e deve ser usado apenas para definir o valor inicial da caixa de seleção. O valor do atributo verificado não muda com o estado da caixa de seleção, enquanto a propriedade marcada. Portanto, a maneira compatível com vários navegadores para determinar se uma caixa de seleção está marcada é usar a propriedade

Todos os métodos abaixo são possíveis

elem.checked 

$(elem).prop("checked") 

$(elem).is(":checked") 
Techie
fonte
38

Você pode usar esse código,

if($("#checkboxId").is(':checked')){
     // Code in the case checkbox is checked.
} else {
     // Code in the case checkbox is NOT checked.
}
Mohammed Shaheen MK
fonte
29

De acordo com a documentação do jQuery , existem as seguintes maneiras de verificar se uma caixa de seleção está marcada ou não. Vamos considerar uma caixa de seleção, por exemplo (Marque Working jsfiddle com todos os exemplos)

<input type="checkbox" name="mycheckbox" id="mycheckbox" />
<br><br>
<input type="button" id="test-with-checked" value="Test with checked" />
<input type="button" id="test-with-is" value="Test with is" />
<input type="button" id="test-with-prop" value="Test with prop" />

Exemplo 1 - Com marcado

$("#test-with-checked").on("click", function(){
    if(mycheckbox.checked) {
        alert("Checkbox is checked.");
    } else {
        alert("Checkbox is unchecked.");
    }
}); 

Exemplo 2 - Com jQuery, NOTE -: marcado

var check;
$("#test-with-is").on("click", function(){
    check = $("#mycheckbox").is(":checked");
    if(check) {
        alert("Checkbox is checked.");
    } else {
        alert("Checkbox is unchecked.");
    }
}); 

Exemplo 3 - Com suporte jQuery

var check;
$("#test-with-prop").on("click", function(){
    check = $("#mycheckbox").prop("checked");
    if(check) {
         alert("Checkbox is checked.");
    } else {
        alert("Checkbox is unchecked.");
    }
}); 

Verificar Working jsfiddle

Subodh Ghulaxe
fonte
26

Você pode tentar isso:

<script>
function checkAllCheckBox(value)
{
   if($('#select_all_').is(':checked')){
   $(".check_").attr ( "checked" ,"checked" );
    }
    else
    {
        $(".check_").removeAttr('checked');
    }

 }

</script>
<input type="checkbox" name="chkbox" id="select_all_" value="1" />


<input type="checkbox" name="chkbox" class="check_" value="Apples" />
<input type="checkbox" name="chkbox" class="check_" value="Bananas" />
<input type="checkbox" name="chkbox" class="check_" value="Apples" />
<input type="checkbox" name="chkbox" class="check_" value="Bananas" />
Vishnu Sharma
fonte
Isso não é mais uma boa maneira de fazer as coisas, pois attrreflete apenas o valor do atributo em HTML, não o valor da propriedade no DOM. Veja a documentação paraattr , onde diz "Para recuperar e alterar as propriedades do DOM, como o checked, selectedou disabledestado de elementos de formulário, use o .prop()método.", E a documentaçãoprop , onde diz "O .prop()método deve ser usado para definir disablede checked, em vez do .attr()método ".
Heretic Monkey
21

Você pode usar qualquer um dos seguintes códigos recomendados pelo jquery.

if ( elem.checked ) {};
if ( $( elem ).prop( "checked" ) ) {};
if ( $( elem ).is( ":checked" ) ) {};
suportar
fonte
20

Eu sei que o OP quer jquery, mas no meu caso JS puro foi a resposta, portanto, se alguém como eu estiver aqui e não tiver jquery ou não quiser usá-lo - aqui está a resposta JS:

document.getElementById("myCheck").checked

Retorna true se a entrada com o ID myCheck estiver marcada e false se não estiver marcada.

Simples assim.

Combinar
fonte
11
o que significa que $("#myCheck")[0].checkedfuncionará em jquery! : D
Sancarn
10

Você pode fazer isso simplesmente como;

Violino de trabalho

HTML

<input id="checkbox" type="checkbox" />

jQuery

$(document).ready(function () {
    var ckbox = $('#checkbox');

    $('input').on('click',function () {
        if (ckbox.is(':checked')) {
            alert('You have Checked it');
        } else {
            alert('You Un-Checked it');
        }
    });
});

ou ainda mais simples;

$("#checkbox").attr("checked") ? alert("Checked") : alert("Unchecked");

Se a opção checkboxestiver marcada, retornará truecaso contrárioundefined

Aamir Shahzad
fonte
or even simpler;->$("#checkbox").checked
Don Cheadle
10

Essa também é uma ideia que uso com frequência:

var active = $('#modal-check-visible').prop("checked") ? 1 : 0 ;

Se marcado, ele retornará 1; caso contrário, retornará 0.

Rtronic
fonte
7

Demonstração simples para marcar e definir uma caixa de seleção.

jsfiddle !

$('.attr-value-name').click(function() {
    if($(this).parent().find('input[type="checkbox"]').is(':checked'))
    {
        $(this).parent().find('input[type="checkbox"]').prop('checked', false);
    }
    else
    {
        $(this).parent().find('input[type="checkbox"]').prop('checked', true);
    }
});
Uma ilusão
fonte
7

Apenas para dizer no meu exemplo, a situação era uma caixa de diálogo que depois verificava a caixa de seleção antes de fechar a caixa de diálogo. Nenhuma das opções acima e Como verificar se uma caixa de seleção está marcada no jQuery? e jQuery se a caixa de seleção estiver marcada também não pareceu funcionar.

No final

<input class="cb" id="rd" type="checkbox">
<input class="cb" id="fd" type="checkbox">

var fd=$('.cb#fd').is(':checked');
var rd= $('.cb#rd').is(':checked');

Isso funcionou para chamar a classe e depois o ID. em vez de apenas o ID. Pode ser que os elementos DOM aninhados nesta página estejam causando o problema. A solução alternativa estava acima.

VH
fonte
6

Para caixa de seleção com um ID

<input id="id_input_checkbox13" type="checkbox"></input>

você pode simplesmente fazer

$("#id_input_checkbox13").prop('checked')

você receberá trueou falsecomo valor de retorno a sintaxe acima. Você pode usá-lo na cláusula if como expressão booleana normal.

Aniket Thakur
fonte
5

Algo assim pode ajudar

togglecheckBoxs =  function( objCheckBox ) {

    var boolAllChecked = true;

    if( false == objCheckBox.checked ) {
        $('#checkAll').prop( 'checked',false );
    } else {
        $( 'input[id^="someIds_"]' ).each( function( chkboxIndex, chkbox ) {
            if( false == chkbox.checked ) {
                $('#checkAll').prop( 'checked',false );
                boolAllChecked = false;
            }
        });

        if( true == boolAllChecked ) {
            $('#checkAll').prop( 'checked',true );
        }
    }
}
Abdul Hamid
fonte
5

Na verdade, de acordo com jsperf.com , as operações do DOM são mais rápidas e, em seguida, $ (). Prop () seguido de $ (). É () !!

Aqui estão as sintaxes:

var checkbox = $('#'+id);
/* OR var checkbox = $("input[name=checkbox1]"); whichever is best */

/* The DOM way - The fastest */
if(checkbox[0].checked == true)
   alert('Checkbox is checked!!');

/* Using jQuery .prop() - The second fastest */
if(checkbox.prop('checked') == true)
   alert('Checkbox is checked!!');

/* Using jQuery .is() - The slowest in the lot */
if(checkbox.is(':checked') == true)
   alert('Checkbox is checked!!');

Eu pessoalmente prefiro .prop(). Ao contrário .is(), também pode ser usado para definir o valor.

Pantera negra
fonte
4

Alternar caixa de seleção marcada

$("#checkall").click(function(){
    $("input:checkbox").prop( 'checked',$(this).is(":checked") );
})
sourceboy
fonte
2

Usando esse código, você pode marcar pelo menos uma caixa de seleção marcada ou não em diferentes grupos de caixas de seleção ou em várias caixas de seleção. Com isso, não é necessário remover IDs ou IDs dinâmicos. Este código funciona com os mesmos IDs.

Link de referência

<label class="control-label col-sm-4">Check Box 2</label>
    <input type="checkbox" name="checkbox2" id="checkbox21" value=ck1 /> ck1<br />
    <input type="checkbox" name="checkbox2" id="checkbox22" value=ck2 /> ck2<br />

<label class="control-label col-sm-4">Check Box 3</label>
    <input type="checkbox" name="checkbox3" id="checkbox31" value=ck3 /> ck3<br />
    <input type="checkbox" name="checkbox3" id="checkbox32" value=ck4 /> ck4<br />

<script>
function checkFormData() {
    if (!$('input[name=checkbox2]:checked').length > 0) {
        document.getElementById("errMessage").innerHTML = "Check Box 2 can not be null";
        return false;
    }
    if (!$('input[name=checkbox3]:checked').length > 0) {
        document.getElementById("errMessage").innerHTML = "Check Box 3 can not be null";
        return false;
    }
    alert("Success");
    return true;
}
</script>
Parth Patel
fonte
Informações básicas: os IDs dos elementos html não se repetem (por exemplo: id = "checkbox2", id = "checkbox3"). Esta não é uma boa prática. Podemos usar a classe várias vezes em uma página.
Anand Somasekhar
1

Como é meados de 2019, o jQuery às vezes leva o banco de trás para coisas como VueJS, React etc. Aqui está uma opção pura de ouvinte de carga de baunilha Javascript:

<script>
  // Replace 'admincheckbox' both variable and ID with whatever suits.

  window.onload = function() {
    const admincheckbox = document.getElementById("admincheckbox");
    admincheckbox.addEventListener('click', function() {
      if(admincheckbox.checked){
        alert('Checked');
      } else {
        alert('Unchecked');
      }
    });
  }
</script>
Conceder
fonte
0

Sua pergunta não é clara: você deseja fornecer "id do array da caixa de seleção" na entrada e obter true/falsea saída - dessa forma, você não saberá qual caixa de seleção foi marcada (como o nome da sua função sugere). Portanto, a seguir, minha proposta de corpo do seu isCheckedByIdque, na entrada, recebe a caixa de seleção ide o retorno da saída true/false(é muito simples, mas seu ID não deve ser palavra-chave),

this[id].checked

Kamil Kiełczewski
fonte
-7

use o código abaixo

<script>

$(document).ready(function () {
  $("[id$='chkSendMail']").attr("onchange", "ShowMailSection()");
}

function ShowMailSection() {
  if ($("[id$='chkSendMail'][type='checkbox']:checked").length >0){
      $("[id$='SecEmail']").removeClass("Hide");
  }
</script>
Code_Worm
fonte
Mesmo? Como sobre$(function() { $("[id$='chkSendMail']").on("change", ShowMailSection); });
mplungjan
E eles são todas as caixas de modo $("[id$='chkSendMail']:checked]")deve funcionar muito bem
mplungjan