javascript - not - jquery saber si un checkbox esta seleccionado

Configuración de "marcado" para una casilla de verificación con jQuery?

Question

Me gustaría hacer algo como esto para marcar una checkbox usando jQuery :

$(".myCheckBox").checked(true);

o

$(".myCheckBox").selected(true);

¿Existe tal cosa?

Answer 1

jQuery 1.6+

Utilice el nuevo método .prop() :

$(''.myCheckbox'').prop(''checked'', true);
$(''.myCheckbox'').prop(''checked'', false);

jQuery 1.5.xy por debajo

El método .prop() no está disponible, por lo que debe usar .attr() .

$(''.myCheckbox'').attr(''checked'', true);
$(''.myCheckbox'').attr(''checked'', false);

Tenga en cuenta que este es el enfoque utilizado por las pruebas de unidad de jQuery antes de la versión 1.6 y es preferible usar

$(''.myCheckbox'').removeAttr(''checked'');

ya que esta última, si la casilla se marcó inicialmente, cambiará el comportamiento de una llamada a .reset() en cualquier formulario que lo contenga, un cambio de comportamiento sutil pero probablemente no deseado.

Para obtener más información, puede encontrar una discusión incompleta de los cambios en el manejo del atributo / propiedad checked en la transición de 1.5.x a 1.6 en las notas de la versión 1.6 y en la sección Atributos y Propiedades de .prop() documentacion

Cualquier versión de jQuery

Si está trabajando con un solo elemento, siempre puede modificar la propiedad .checked :

$(''.myCheckbox'')[0].checked = true;
$(''.myCheckbox'')[0].checked = false;

La ventaja de usar los .prop() y .attr() lugar de esto es que funcionarán en todos los elementos emparejados.

Answer 2

Aquí está el código para marcado y sin marcar con un botón:

var set=1;
var unset=0;
jQuery( function() {
    $( ''.checkAll'' ).live(''click'', function() {
        $( ''.cb-element'' ).each(function () {
            if(set==1){ $( ''.cb-element'' ).attr(''checked'', true) unset=0; }
            if(set==0){ $( ''.cb-element'' ).attr(''checked'', false); unset=1; }
        });
        set=unset;
    });
});

Actualización: este es el mismo bloque de código que utiliza el nuevo método de prop Jquery 1.6+, que reemplaza attr:

var set=1;
var unset=0;
jQuery( function() {
    $( ''.checkAll'' ).live(''click'', function() {
        $( ''.cb-element'' ).each(function () {
            if(set==1){ $( ''.cb-element'' ).prop(''checked'', true) unset=0; }
            if(set==0){ $( ''.cb-element'' ).prop(''checked'', false); unset=1; }
        });
        set=unset;
    });
});

Answer 3

Aquí está el código y la demostración de cómo marcar varias casillas de verificación ...

http://jsfiddle.net/tamilmani/z8TTt/

$("#check").on("click", function () {

    var chk = document.getElementById(''check'').checked;
    var arr = document.getElementsByTagName("input");

    if (chk) {
        for (var i in arr) {
            if (arr[i].name == ''check'') arr[i].checked = true;
        }
    } else {
        for (var i in arr) {
            if (arr[i].name == ''check'') arr[i].checked = false;
        }
    }
});

Answer 4

Aquí hay una forma de hacerlo sin jQuery.

function addOrAttachListener(el, type, listener, useCapture) {
  if (el.addEventListener) {
    el.addEventListener(type, listener, useCapture);
  } else if (el.attachEvent) {
    el.attachEvent("on" + type, listener);
  }
};

addOrAttachListener(window, "load", function() {
  var cbElem = document.getElementById("cb");
  var rcbElem = document.getElementById("rcb");
  addOrAttachListener(cbElem, "click", function() {
    rcbElem.checked = cbElem.checked;
  }, false);
}, false);

<label>Click Me!
  <input id="cb" type="checkbox" />
</label>
<label>Reflection:
  <input id="rcb" type="checkbox" />
</label>

Answer 5

Como dijo @ livefree75:

jQuery 1.5.xy por debajo

También puede extender el objeto $ .fn con nuevos métodos:

(function($)  {
   $.fn.extend({
      check : function()  {
         return this.filter(":radio, :checkbox").attr("checked", true);
      },
      uncheck : function()  {
         return this.filter(":radio, :checkbox").removeAttr("checked");
      }
   });
}(jQuery));

Pero en las nuevas versiones de jQuery, tenemos que usar algo como esto:

jQuery 1.6+

    (function($)  {
       $.fn.extend({
          check : function()  {
             return this.filter(":radio, :checkbox").prop("checked", true);
          },
          uncheck : function()  {
             return this.filter(":radio, :checkbox").prop("checked",false);
          }
       });
    }(jQuery));

Entonces puedes simplemente hacer:

    $(":checkbox").check();
    $(":checkbox").uncheck();

Answer 6

Cuando marcó una casilla de verificación como;

$(''.className'').attr(''checked'', ''checked'')

puede que no sea suficiente También debe llamar a la función de abajo;

$(''.className'').prop(''checked'', ''true'')

Especialmente cuando eliminaste la casilla marcada atributo.

Answer 7

En jQuery,

if($("#checkboxId").is('':checked'')){
    alert("Checked");
}

o

if($("#checkboxId").attr(''checked'')==true){
    alert("Checked");
}

En JavaScript,

if (document.getElementById("checkboxID").checked){
    alert("Checked");
}

Answer 8

Esta es la forma correcta de marcar y desmarcar casillas de verificación con jQuery, ya que es un estándar multiplataforma, y ​​permitirá reposiciones de formularios.

$(''.myCheckBox'').each(function(){ this.checked = true; });

$(''.myCheckBox'').each(function(){ this.checked = false; });

Al hacer esto, está utilizando los estándares de JavaScript para marcar y desmarcar casillas de verificación, por lo que cualquier navegador que implemente adecuadamente la propiedad "marcada" del elemento de casilla de verificación ejecutará este código sin fallas. Estos deben ser todos los principales navegadores, pero no puedo realizar pruebas anteriores a Internet Explorer 9.

El problema (jQuery 1.6):

Una vez que un usuario hace clic en una casilla de verificación, esa casilla deja de responder a los cambios de atributo "marcados".

Este es un ejemplo de la falla del atributo de casilla de verificación para hacer el trabajo después de que alguien haya hecho clic en la casilla de verificación (esto sucede en Chrome).

Fiddle

La solución:

Al utilizar la propiedad "verificada" de JavaScript en los elementos DOM , podemos resolver el problema directamente, en lugar de tratar de manipular el DOM para que haga lo que queremos que haga.

Fiddle

Este complemento alterará la propiedad marcada de cualquier elemento seleccionado por jQuery, y marcará y desmarcará las casillas de verificación en cualquier circunstancia. Por lo tanto, si bien esto puede parecer una solución dominante, mejorará la experiencia de usuario de su sitio y ayudará a evitar la frustración del usuario.

(function( $ ) {
    $.fn.checked = function(value) {
        if(value === true || value === false) {
            // Set the value of the checkbox
            $(this).each(function(){ this.checked = value; });
        } 
        else if(value === undefined || value === ''toggle'') {
            // Toggle the checkbox
            $(this).each(function(){ this.checked = !this.checked; });
        }

        return this;
    };
})( jQuery );

Alternativamente, si no desea usar un complemento, puede usar los siguientes fragmentos de código:

// Check
$('':checkbox'').prop(''checked'', true);

// Un-check
$('':checkbox'').prop(''checked'', false);

// Toggle
$('':checkbox'').prop(''checked'', function (i, value) {
    return !value;
});

Answer 9

Esta es probablemente la solución más corta y fácil:

$(".myCheckBox")[0].checked = true;

o

$(".myCheckBox")[0].checked = false;

Aún más corto sería:

$(".myCheckBox")[0].checked = !0;
$(".myCheckBox")[0].checked = !1;

Aquí hay un jsFiddle también.

Answer 10

Esto selecciona elementos que tienen el atributo especificado con un valor que contiene la subcadena dada "ckbItem":

$(''input[name *= ckbItem]'').prop(''checked'', true);

Seleccionará todos los elementos que contengan ckbItem en su atributo de nombre.

Answer 11

JavaScript simple es muy simple y mucho menos de sobrecarga:

var elements = document.getElementsByClassName(''myCheckBox'');
for(var i = 0; i < elements.length; i++)
{
    elements[i].checked = true;
}

Ejemplo aquí

Answer 12

Me falta la solución. Siempre usaré:

if ($(''#myCheckBox:checked'').val() !== undefined)
{
    //Checked
}
else
{
    //Not checked
}

Answer 13

No pude hacerlo funcionar usando:

$("#cb").prop(''checked'', ''true'');
$("#cb").prop(''checked'', ''false'');

Tanto verdadero como falso marcaría la casilla de verificación. Lo que funcionó para mí fue:

$("#cb").prop(''checked'', ''true''); // For checking
$("#cb").prop(''checked'', '''');     // For unchecking

Answer 14

Otra posible solución:

    var c = $("#checkboxid");
    if (c.is(":checked")) {
         $(''#checkboxid'').prop(''checked'', false);
    } else {
         $(''#checkboxid'').prop(''checked'', true);
    }

Answer 15

Para jQuery 1.6+

$(''.myCheckbox'').prop(''checked'', true);
$(''.myCheckbox'').prop(''checked'', false);

Para jQuery 1.5.xy por debajo

$(''.myCheckbox'').attr(''checked'', true);
$(''.myCheckbox'').attr(''checked'', false);

Verificar,

$(''.myCheckbox'').removeAttr(''checked'');

Answer 16

Para marcar una casilla de verificación utilizando jQuery 1.6 o superior, simplemente haga esto:

checkbox.prop(''checked'', true);

Para desmarcar, utilice:

checkbox.prop(''checked'', false);

Esto es lo que me gusta usar para alternar una casilla de verificación utilizando jQuery:

checkbox.prop(''checked'', !checkbox.prop(''checked''));

Si estás usando jQuery 1.5 o inferior:

checkbox.attr(''checked'', true);

Para desmarcar, utilice:

checkbox.attr(''checked'', false);

Answer 17

Para marcar una casilla debe usar

 $(''.myCheckbox'').attr(''checked'',true);

o

 $(''.myCheckbox'').attr(''checked'',''checked'');

y para desmarcar una casilla de verificación, siempre debe establecerla en falso:

 $(''.myCheckbox'').attr(''checked'',false);

Si lo haces

  $(''.myCheckbox'').removeAttr(''checked'')

elimina el atributo por completo y, por lo tanto, no podrá restablecer el formulario.

MAL DEMO jQuery 1.6 . Creo que esto está roto. Para 1.6 voy a hacer un nuevo post sobre eso.

NUEVA DEMO DE TRABAJO jQuery 1.5.2 funciona en Chrome.

Ambas demos usan

$(''#tc'').click(function() {
    if ( $(''#myCheckbox'').attr(''checked'')) {
        $(''#myCheckbox'').attr(''checked'', false);
    } else {
        $(''#myCheckbox'').attr(''checked'', ''checked'');
    }
});

Answer 18

Para marcar y desmarcar

$(''.myCheckbox'').prop(''checked'', true);
$(''.myCheckbox'').prop(''checked'', false);

Answer 19

Podemos usar elementObject con jQuery para verificar el atributo:

$(objectElement).attr(''checked'');

Podemos usar esto para todas las versiones de jQuery sin ningún error.

Actualización: Jquery 1.6+ tiene el nuevo método de prop que reemplaza attr, por ejemplo:

$(objectElement).prop(''checked'');

Answer 20

Prueba esto:

$(''#checkboxid'').get(0).checked = true;  //For checking

$(''#checkboxid'').get(0).checked = false; //For unchecking

Answer 21

Si usa PhoneGap para el desarrollo de aplicaciones y tiene un valor en el botón que desea mostrar al instante, recuerde hacer esto.

$(''span.ui-[controlname]'',$(''[id]'')).text("the value");

Encontré que sin el intervalo, la interfaz no se actualizará sin importar lo que hagas.

Answer 22

Si usa el dispositivo móvil y desea que la interfaz se actualice y muestre la casilla de verificación como desactivada, use lo siguiente:

$("#checkbox1").prop(''checked'', false).checkboxradio("refresh");

Answer 23

Suponiendo que la pregunta es ...

¿Cómo verifico un checkbox-set POR VALOR?

Recuerde que en un conjunto de casilla de verificación típico, todas las etiquetas de entrada tienen el mismo nombre, difieren según el value del atributo : no hay ID para cada entrada del conjunto.

La respuesta de Xian se puede extender con un selector más específico , utilizando la siguiente línea de código:

$("input.myclass[name=''myname''][value=''the_value'']").prop("checked", true);

Answer 24

También puede extender el objeto $ .fn con nuevos métodos:

(function($)  {
   $.fn.extend({
      check : function()  {
         return this.filter(":radio, :checkbox").attr("checked", true);
      },
      uncheck : function()  {
         return this.filter(":radio, :checkbox").removeAttr("checked");
      }
   });
}(jQuery));

Entonces puedes simplemente hacer:

$(":checkbox").check();
$(":checkbox").uncheck();

O quizás desee darles nombres más únicos como mycheck () y myuncheck () en caso de que use alguna otra biblioteca que use esos nombres.

Answer 25

Tenga en cuenta las pérdidas de memoria en Internet Explorer antes de Internet Explorer 9 , ya que la api.jquery.com/prop :

En Internet Explorer anterior a la versión 9, el uso de .prop () para establecer una propiedad del elemento DOM en un valor distinto a un simple valor primitivo (número, cadena o booleano) puede provocar pérdidas de memoria si la propiedad no se elimina (usando .removeProp ( )) antes de que el elemento DOM se elimine del documento. Para establecer valores de forma segura en objetos DOM sin pérdidas de memoria, use .data ().

Answer 26

Tu puedes hacer

$(''.myCheckbox'').attr(''checked'',true) //Standards compliant

o

$("form #mycheckbox").attr(''checked'', true)

Si tiene un código personalizado en el evento onclick para la casilla de verificación que desea activar, use este en su lugar:

$("#mycheckbox").click();

Puede desmarcar eliminando el atributo por completo:

$(''.myCheckbox'').removeAttr(''checked'')

Puede marcar todas las casillas de verificación como esta:

$(".myCheckbox").each(function(){
    $("#mycheckbox").click()
});

Answer 27

Utilizar:

$(".myCheckbox").attr(''checked'', true); // Deprecated
$(".myCheckbox").prop(''checked'', true);

Y si desea comprobar si una casilla está marcada o no:

$(''.myCheckbox'').is('':checked'');

Answer 28

Aquí está la respuesta completa usando jQuery

Lo pruebo y funciona al 100%: D

    // when the button (select_unit_button) is clicked it returns all the checed checkboxes values 
    $("#select_unit_button").on("click", function(e){

             var arr = [];

             $('':checkbox:checked'').each(function(i){
                 arr[i] = $(this).val(); // u can get id or anything else
             });

              //console.log(arr); // u can test it using this in google chrome
    });

Answer 29

$("#mycheckbox")[0].checked = true;
$("#mycheckbox").attr(''checked'', true);
$("#mycheckbox").click();

El último activará el evento de clic para la casilla de verificación, los otros no. Entonces, si tiene un código personalizado en el evento onclick para la casilla de verificación que desea activar, use la última.

Answer 30

$(''controlCheckBox'').click(function(){
    var temp = $(this).prop(''checked'');
    $(''controlledCheckBoxes'').prop(''checked'', temp);
});