Compruebe si la casilla de verificación está marcada con jQuery

¿Cómo puedo verificar si una casilla de verificación en una matriz de casilla de verificación está marcada usando la identificación de la matriz de casilla de verificación?

Estoy usando el siguiente código, pero siempre devuelve el recuento de casillas marcadas independientemente de la identificación.

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

    if (checked == 0) {
        return false;
    } else {
        return true;
    }
}

Las ID deben ser únicas en su documento, lo que significa que no debe hacer esto:

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

En su lugar, suelte la ID y luego selecciónelas por nombre o por un elemento contenedor:

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

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

Y ahora el 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")

Eso se obtiene si la casilla de verificación está marcada.

Para una variedad de casillas de verificación con el mismo nombre, puede obtener la lista de las marcadas:

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

Luego, para recorrerlos y ver qué está marcado, puede hacer:

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

Para saber cuántos están marcados, puede hacer:

$boxes.length;

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

El código anterior devuelve verdadero si la casilla de verificación está marcada o falso si no.

Todos los siguientes métodos son útiles:

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

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

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

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

Se recomienda evitar DOMelement o "this.checked" en línea, en lugar de jQuery en el método se debe usar el detector de eventos.

Código jQuery para verificar si la casilla está marcada o no:

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

Alternativamente:

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

El concepto más importante para recordar sobre el atributo marcado es que no corresponde a la propiedad marcada. El atributo en realidad corresponde a la propiedad defaultChecked y debe usarse solo para establecer el valor inicial de la casilla de verificación. El valor del atributo marcado no cambia con el estado de la casilla de verificación, mientras que la propiedad marcada sí. Por lo tanto, la forma compatible con varios navegadores para determinar si una casilla de verificación está marcada es usar la propiedad

Todos los métodos a continuación son posibles

elem.checked 

$(elem).prop("checked") 

$(elem).is(":checked") 

Puedes usar este código,

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

Según la documentación de jQuery , existen las siguientes formas de verificar si una casilla está marcada o no. Consideremos una casilla de verificación, por ejemplo (marque Working jsfiddle con todos los ejemplos)

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

Ejemplo 1 - Con marcado

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

Ejemplo 2 - Con jQuery es, NOTA -: marcado

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

Ejemplo 3 - Con jQuery prop

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

Comprobar trabajo jsfiddle

Puedes probar esto:

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

Puede usar cualquiera de los siguientes códigos recomendados por jquery.

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

Sé que el OP quiere jquery, pero en mi caso JS puro fue la respuesta, así que si alguien como yo está aquí y no tiene jquery o no quiere usarlo, aquí está la respuesta de JS:

document.getElementById("myCheck").checked

Devuelve verdadero si la entrada con ID myCheck está marcada y falsa si no está marcada.

Simple como eso.

Puedes hacerlo simplemente como;

Violín de trabajo

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

o incluso más simple;

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

Si checkboxestá marcado, volverá de lo truecontrarioundefined

Esta es también una idea que uso con frecuencia:

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

Si está marcado, devolverá 1; de lo contrario, devolverá 0.

Demo simple para marcar y configurar una casilla de verificación.

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

Solo para decir en mi ejemplo, la situación era un cuadro de diálogo que luego verificó la casilla de verificación antes de cerrar el cuadro de diálogo. Ninguno de los anteriores y ¿Cómo verificar si una casilla de verificación está marcada en jQuery? y jQuery si la casilla de verificación está marcada tampoco parecía funcionar.

En el 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');

Esto funcionó llamando a la clase y luego a la ID. en lugar de solo la identificación. Puede deberse a que los elementos DOM anidados en esta página causan el problema. La solución estaba arriba.

Para casilla de verificación con una identificación

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

simplemente puedes hacer

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

obtendrá trueo falsecomo valor de retorno para la sintaxis anterior. Puede usarlo en la cláusula if como expresión booleana normal.

Algo como esto puede ayudar

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

De hecho, de acuerdo con jsperf.com , ¡las operaciones DOM son más rápidas, luego $ (). Prop () seguido de $ (). Is () !!

Aquí están las sintaxis:

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!!');

Prefiero personalmente .prop(). A diferencia .is(), también se puede usar para establecer el valor.

Casilla de verificación activada

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

Con este código, puede marcar al menos una casilla de verificación seleccionada o no en diferentes grupos de casillas de verificación o desde varias casillas de verificación. Con esto, no puede requerir eliminar ID o ID dinámicas. Este código funciona con las mismas ID.

Enlace de referencia

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

Dado que es mediados de 2019 y jQuery a veces pasa a segundo plano a cosas como VueJS, React, etc. Aquí hay una opción de escucha de descarga de Javascript puro:

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

Su pregunta no está clara: desea dar "ID de matriz de casilla de verificación" en la entrada y llegar true/falsea la salida; de esta manera no sabrá qué casilla de verificación se marcó (como sugiere su nombre de función). Así que a continuación está mi propuesta de cuerpo, isCheckedByIdque en la entrada toma la casilla de verificación idy en la salida de retorno true/false(es muy simple, pero su ID no debe ser una palabra clave),

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>

usa el código a continuación

<script>

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

function ShowMailSection() {
  if ($("[id$='chkSendMail'][type='checkbox']:checked").length >0){
      $("[id$='SecEmail']").removeClass("Hide");
  }
</script>