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 casillas de verificación está marcada usando la identificación de la matriz de casillas de verificación?

Estoy usando el siguiente código, pero siempre devuelve el recuento de 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;
    }
}

preguntado el 04 de febrero de 10 a las 21:02

A matriz de casilla de verificación? Nunca he oído hablar de tal cosa. ¿Es algo específico de JQuery o un complemento / widget? -

una matriz de casilla de verificación significa algo como: etc .. -

¿Qué pasa con una matriz de casilla de verificación? ¿De qué otra manera haría una entrada de "marque todo lo que corresponda"? -

Asegúrate de que tu id s son únicos! name puede (y debería, en este caso) repetir, pero encontrará un montón de cosas raras que suceden si duplica el id! = D -

Tuve que quitar la "@" para que funcionara. Además, puede reducir las últimas 5 líneas a 1: return (¡marcado! = 0); -

24 Respuestas

Las identificaciones 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 el ID y luego selecciónelo por su 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 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;

Respondido el 31 de diciembre de 15 a las 08:12

Para mí funcionó sin comillas dobles en el nombre de entrada: entrada [nombre = multiplecheck []]: comprobado, ¡gracias! - alejandro quiroz

¿Por qué utilizar $('#checkArray :checkbox:checked').length > 0; cuando el mas simple $('#checkArray').checked funciona y está disponible en más versiones? - Don Cheadle

@Oddman funciona, pero no en un objeto jquery. en lugar de $ (elem) .checked, intente con elem.checked. - dan williams

@DanWilliams sí, pero no en el ejemplo que dio mmcrae. - Hombre impar

El segundo me funcionó. ¡¡Gracias!! var atLeastOneIsChecked = $('input[name="chk[]"]:checked').length > 0; - David Silva Barrera

$('#' + id).is(":checked")

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

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

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;

Respondido 18 Feb 16, 14:02

Otra forma es $('#'+id).attr('checked'), que es equivalente a $('#' + id).is(":checked") pero más fácil de recordar en mi opinión. - Zubin

@Zubin: Ten cuidado con .attr('checked'). Su comportamiento cambió en jQuery 1.6. Solía ​​volver false or true. Ahora vuelve undefined or "checked". .is(':checked') no tiene este problema. - joey adams

@John Boker: perdón por el comentario necro pero, ¿por qué es eso? $('.ClassName').is(':checked') no parece funcionar pero $('#' + id).is(":checked") ¿lo hace? aparte del hecho de que uno busca por id y otro por classname. - mike_obrien

@Mike_OBrien El problema podría ser que hay más de una casilla de verificación con ese nombre de clase. El es (': comprobado') realmente solo funciona en un elemento. - Juan Boker

Nota: size () ha quedado obsoleto desde jQuery 1.8 - use .length en su lugar - JM4

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

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

respondido 18 nov., 13:14

muy útil cuando se usa $ (this) .is (': comprobado'); ¡Gracias! - PinoyStackAverflower

De esta manera es útil verificar si la casilla de verificación está marcada, donde sabe cómo seleccionarla, gracias - Omar dijo

Esto funcionó para mí, lo usé antes var isChecked = $('#CheckboxID').attr('checked') ? true : false; pero no siempre devolvió el valor correcto. ¡Así que gracias! - leiit

Todos los métodos siguientes 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 utilizar jQuery on como detector de eventos.

Respondido 13 Jul 16, 17:07

Código jQuery 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
}

contestado el 08 de mayo de 17 a las 22:05

Falta la primera solución :... La correcta es: if(('input[name="checkBoxName"]').is(':checked')). - Aerendir

Falta el signo de dólar ($), debería ser if($('input[name="checkBoxName"]').is(':checked')). - penique liu

El segundo nunca ejecutará el else block, ya que un objeto jQuery, incluso si no contiene elementos coincidentes, es "veraz". Agregar .length hasta el final, entonces estás hablando. - Mono hereje

El concepto más importante a recordar sobre el atributo verificado es que no corresponde a la propiedad verificada. 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í lo hace. Por lo tanto, la forma compatible con varios navegadores de determinar si una casilla de verificación está marcada es usar la propiedad

Todos los métodos siguientes son posibles

elem.checked 

$(elem).prop("checked") 

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

Respondido 09 Jul 13, 07:07

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

contestado el 03 de mayo de 16 a las 05:05

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

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

Si se marca, devolverá 1; de lo contrario, devolverá 0.

contestado el 08 de mayo de 20 a las 19:05

Según jQuery documentación Existen las siguientes formas de comprobar si una casilla de verificación está marcada o no. Consideremos una casilla de verificación, por ejemplo (Marque Trabajando 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, 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 funcionamiento jsFiddle

Respondido el 28 de enero de 15 a las 05:01

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

Respondido 24 Jul 14, 14:07

Esta ya no es una buena forma de hacer las cosas, ya que attr solo refleja el valor del atributo en HTML, no el valor de la propiedad en el DOM. Ver la documentación para attr, donde dice "Para recuperar y cambiar propiedades DOM, como el checked, selectedo disabled estado de los elementos de formulario, utilice el .prop() método. ", y la documentación para prop, donde dice "El .prop() El método debe usarse para establecer disabled y checked en vez de .attr() método. "- Mono hereje

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.

Tan simple como eso.

Respondido el 28 de junio de 18 a las 10:06

significa que $("#myCheck")[0].checked funcionará en jquery! :D - Sancarn

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

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

Respondido 17 Feb 15, 13:02

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 checkbox está marcado volverá true de otra manera undefined

Respondido 08 Oct 14, 13:10

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

Demostración 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);
    }
});

Respondido 24 Jul 14, 14:07

Solo para decir en mi ejemplo que 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 verificar si una casilla de verificación está marcada en jQuery? y jQuery si la casilla de verificación está marcada tampoco pareció 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ó, así que llamar a la clase y luego a la ID. en lugar de solo la identificación. Puede deberse a los elementos DOM anidados en esta página que causan el problema. La solución estaba arriba.

contestado el 23 de mayo de 17 a las 12:05

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

conseguirás true or false como valor de retorno para la sintaxis anterior. Puede usarlo en la cláusula if como expresión booleana normal.

Respondido el 05 de junio de 14 a las 14:06

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

Respondido 30 Jul 13, 04:07

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

Yo personalmente prefiero .prop(). diferente a .is(), También se puede utilizar para establecer el valor.

Respondido 10 ago 14, 18:08

Alternar casilla de verificación marcada

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

Respondido 08 Jul 14, 06:07

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 de varias casillas de verificación. Al usar esto, no puede solicitar eliminar ID o ID dinámicos. Este código funciona con los mismos ID.

Referencia Enlace

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

Respondido 26 Abr '18, 14:04

Información básica: los ID de los elementos html no se repiten (por ejemplo: id = "checkbox2", id = "checkbox3"). Ésta no es una buena práctica. Podemos usar la clase varias veces en una página. - Anand Somasekhar

Su pregunta no es clara: desea dar "checkbox array id" en la entrada y obtener true/false en la salida: de esta manera, no sabrá qué casilla de verificación se marcó (como sugiere el nombre de su función). Así que a continuación está mi propuesta de cuerpo de tu isCheckedById que en la entrada tomar la casilla de verificación id y en retorno de salida true/false (es muy simple pero su ID no debe ser una palabra clave),

this[id].checked

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



// TEST

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>

Respondido 20 Oct 20, 08:10

Dado que es mediados de 2019 y jQuery a veces pasa a un segundo plano en cosas como VueJS, React, etc. Aquí hay una opción de escucha de carga de JavaScript puramente vanilla:

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

Respondido el 05 de junio de 19 a las 14:06

$(document).on('click','#checkBoxId',function(){
  var isChecked = $(this).is(':checked');
  console.log(isChecked);
});

Este código anterior también funciona en modal de arranque. isChecked es verdadero o falso;

respondido 27 mar '21, 06:03

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>

Respondido 27 Abr '15, 07:04

¿En serio? Qué tal si $(function() { $("[id$='chkSendMail']").on("change", ShowMailSection); }); - mplungjan

Y todas son casillas de verificación, así que $("[id$='chkSendMail']:checked]") debería funcionar bien - mplungjan

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.