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


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

Estoy usando el siguiente código, pero siempre devuelve el conteo de las casillas de verificación 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;
  }
}

Answers


Los ID deben ser únicos 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 identificación y luego selecciónelas por su nombre o por un elemento que lo contenga:

<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 pone si la casilla de verificación está marcada.

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

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

Luego, recorrerlos y ver qué se ha verificado que puedes 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 es falsa si no es así.




El concepto más importante para recordar sobre el atributo verificado es que no se corresponde con la propiedad marcada. El atributo en realidad corresponde a la propiedad chequeo por defecto y debe usarse solo para establecer el valor inicial de la casilla de verificación. El valor del atributo comprobado no cambia con el estado de la casilla, 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") 



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 su lugar se debe usar jQuery en el método.




jQuery code para verificar si la casilla de verificación está marcada o no:

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

Alternativamente:

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



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



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



Según la documentación de jQuery , existen las siguientes formas de verificar si una casilla de verificación está marcada o no. Consideremos una casilla de verificación por ejemplo (Check 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 marcada

$("#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 el trabajo jsfiddle




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

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



Puedes hacerlo simplemente como;

Fiddle 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 la checkbox está marcada, se mostrará como true contrario undefined




Demo simple para verificar 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);
    }
});



Para la casilla de verificación con una identificación

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

puedes simplemente hacer

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

obtendrá true o false como valor de retorno para la sintaxis anterior. Puede usarlo en 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, según 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!!');

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




Solo para decir en mi ejemplo, la situación era un cuadro de diálogo que luego verificaba la casilla de verificación antes de cerrar el diálogo. Ninguno de los anteriores y ¿Cómo comprobar si una casilla de verificación está marcada en jQuery? y jQuery si la casilla de verificación está marcada tampoco parece 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 ser debido a los elementos DOM anidados en esta página que causan el problema. La solución fue superior.




Activar o desactivar la casilla de verificación

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



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