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

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

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;

$('#' + 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;

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

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

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.

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
}

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") 

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

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

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" />

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

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

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.

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

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.

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

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.

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.

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

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.

Alternar caixa de seleção marcada

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

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>

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>

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

function isCheckedById(id) {
  return this[id].checked;
}

function check() {
  console.clear()
  console.log('1',isCheckedById("myCheckbox1"));
  console.log('2',isCheckedById("myCheckbox2"));
  console.log('3',isCheckedById("myCheckbox3"));
}

<label><input id="myCheckbox1" type="checkbox">check 1</label>
<label><input id="myCheckbox2" type="checkbox">check 2</label>
<label><input id="myCheckbox3" type="checkbox">check 3</label>
<!-- label around inputs makes text clickable -->
<br>
<button onclick="check()">show checked</button>

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>