¿Cómo restablecer todas las casillas de verificación usando jQuery o JS puro?

Question 1

¿Cómo puedo restablecer todas las casillas de verificación en un documento usando jQuery o JS puro?

Question 2

Si te refieres a cómo eliminar el estado 'marcado' de todas las casillas de verificación:

$('input:checkbox').removeAttr('checked');

Question 3

Si desea usar la función de restablecimiento del formulario, es mejor que use esto:

$('input[type=checkbox]').prop('checked',true);

O

$('input[type=checkbox]').prop('checked',false);

Parece que removeAttr()no se puede restablecer form.reset().

Question 4

La respuesta anterior no funcionó para mí:

Lo siguiente funcionó

$('input[type=checkbox]').each(function() 
{ 
        this.checked = false; 
});

Esto asegura que todas las casillas de verificación estén desmarcadas.

Question 5

He usado esto antes:

$('input[type=checkbox]').prop('checked', false);

Parece que .attr y .removeAttr no funcionan en algunas situaciones.

editar: Tenga en cuenta que en jQuery v1.6 y superior, debería usarlo en su .prop('checked', false)lugar para una mayor compatibilidad entre navegadores; consulte https://api.jquery.com/prop

Comente aquí: ¿Cómo restablecer todas las casillas de verificación usando jQuery o JS puro?

Question 6

En algunos casos, la casilla de verificación puede estar seleccionada de forma predeterminada. Si desea restaurar la selección predeterminada en lugar de establecerla como no seleccionada, compare la defaultCheckedpropiedad.

$(':checkbox').each(function(i,item){ 
        this.checked = item.defaultChecked; 
});

Question 7

Javascript

var clist = document.getElementsByTagName("input");
for (var i = 0; i < clist.length; ++i) { clist[i].checked = false; }

jQuery

$('input:checkbox').each(function() { this.checked = false; });

Para hacer lo contrario, consulte: Seleccionar todas las casillas de verificación por ID / clase

Question 8

 $(":checkbox:checked").each(function () {

 this.click(); 
});

para desmarcar la casilla marcada, cambie su lógica para hacer lo contrario

Question 9

Puede seleccionar qué div o parte de su página puede tener casillas de verificación marcadas y cuáles no. Me encontré con el escenario en el que tengo dos formularios en mi página y uno tiene valores prellenados (para actualizar) y el otro debe completarse nuevamente.

$('#newFormId input[type=checkbox]').attr('checked',false);

esto hará solo casillas de verificación en el formulario con id newFormId sin marcar.

Question 10

Como se dijo en la respuesta de Tatu Ulmanen, usar el siguiente guión hará el trabajo

$('input:checkbox').removeAttr('checked');

Pero, como decía el comentario de Blakomen , después de la versión 1.6 es mejor usar jQuery.prop()en su lugar

Tenga en cuenta que en jQuery v1.6 y superior, debería usar .prop ('verificado', falso) en su lugar para una mayor compatibilidad entre navegadores

$('input:checkbox').prop('checked', false);

Tenga cuidado cuando su uso jQuery.each()puede causar problemas de rendimiento. (también, evite jQuery.find()en ese caso. Use cada uno en su lugar)

$('input[type=checkbox]').each(function() 
{ 
    $(this).prop('checked', false); 
});

Question 11

Usé algo así

$(yourSelector).find('input:checkbox').removeAttr('checked');

Question 12

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container check">
<button class="btn">click</button>
  <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car<br>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car<br>
</div>
<script>
$('.btn').click(function() {

$('input[type=checkbox]').each(function() 
{ 
        this.checked = false; 
}); 
})
</script>
</body>
</html>

Answer 1

84

¿Cómo puedo restablecer todas las casillas de verificación en un documento usando jQuery o JS puro?

javascript jquery checkbox desfile de calle
fuente

Answer 2

145

Si te refieres a cómo eliminar el estado 'marcado' de todas las casillas de verificación:

$('input:checkbox').removeAttr('checked');

Tatu Ulmanen
fuente

Este script alterna el estado de las casillas de verificación. No estoy seguro de si estoy haciendo algo mal

Domingo

38

Tenga en cuenta que en jQuery v1.6 y superior, debería usar .prop ('comprobado', falso) en su lugar para una mayor compatibilidad entre navegadores; consulte api.jquery.com/prop

Henry C

Usé esto para restablecer el formulario antes de abrir un nuevo cuadro de diálogo. Después de esto, necesito poner una casilla de verificación 'marcada' y esto no funciona. Cuando miro el código generado, está 'marcado' pero en mi página no es $ ('input: checkbox'). RemoveAttr ('comprobado'); $ ('entrada [valor =' + val + ']'). attr ('comprobado', verdadero);

Gayane

1

Esta es ahora una respuesta obsoleta - ver: stackoverflow.com/questions/17420534/…

razón

Answer 3

Este script alterna el estado de las casillas de verificación. No estoy seguro de si estoy haciendo algo mal

Domingo

Answer 4

38

Tenga en cuenta que en jQuery v1.6 y superior, debería usar .prop ('comprobado', falso) en su lugar para una mayor compatibilidad entre navegadores; consulte api.jquery.com/prop

Henry C

Answer 5

Usé esto para restablecer el formulario antes de abrir un nuevo cuadro de diálogo. Después de esto, necesito poner una casilla de verificación 'marcada' y esto no funciona. Cuando miro el código generado, está 'marcado' pero en mi página no es $ ('input: checkbox'). RemoveAttr ('comprobado'); $ ('entrada [valor =' + val + ']'). attr ('comprobado', verdadero);

Gayane

Answer 6

1

Esta es ahora una respuesta obsoleta - ver: stackoverflow.com/questions/17420534/…

razón

Answer 7

47

Si desea usar la función de restablecimiento del formulario, es mejor que use esto:

$('input[type=checkbox]').prop('checked',true);

O

$('input[type=checkbox]').prop('checked',false);

Parece que removeAttr()no se puede restablecer form.reset().

Kevin Q. Yu
fuente

1

Aunque la respuesta aceptada también funciona, creo que esta es la mejor manera de hacerlo. Por favor, si está leyendo esto, considere usarlo de esta manera, ya que es la mejor práctica.

rafaelmorais

Answer 8

1

Aunque la respuesta aceptada también funciona, creo que esta es la mejor manera de hacerlo. Por favor, si está leyendo esto, considere usarlo de esta manera, ya que es la mejor práctica.

rafaelmorais

Answer 9

La respuesta anterior no funcionó para mí:

Lo siguiente funcionó

$('input[type=checkbox]').each(function() 
{ 
        this.checked = false; 
});

Esto asegura que todas las casillas de verificación estén desmarcadas.

Answer 10

He usado esto antes:

$('input[type=checkbox]').prop('checked', false);

Parece que .attr y .removeAttr no funcionan en algunas situaciones.

editar: Tenga en cuenta que en jQuery v1.6 y superior, debería usarlo en su .prop('checked', false)lugar para una mayor compatibilidad entre navegadores; consulte https://api.jquery.com/prop

Comente aquí: ¿Cómo restablecer todas las casillas de verificación usando jQuery o JS puro?

Answer 11

En algunos casos, la casilla de verificación puede estar seleccionada de forma predeterminada. Si desea restaurar la selección predeterminada en lugar de establecerla como no seleccionada, compare la defaultCheckedpropiedad.

$(':checkbox').each(function(i,item){ 
        this.checked = item.defaultChecked; 
});

Answer 12

Javascript

var clist = document.getElementsByTagName("input");
for (var i = 0; i < clist.length; ++i) { clist[i].checked = false; }

jQuery

$('input:checkbox').each(function() { this.checked = false; });

Para hacer lo contrario, consulte: Seleccionar todas las casillas de verificación por ID / clase

Answer 13

4

 $(":checkbox:checked").each(function () {

 this.click(); 
});

para desmarcar la casilla marcada, cambie su lógica para hacer lo contrario

Yene Mulatu
fuente

Answer 14

Puede seleccionar qué div o parte de su página puede tener casillas de verificación marcadas y cuáles no. Me encontré con el escenario en el que tengo dos formularios en mi página y uno tiene valores prellenados (para actualizar) y el otro debe completarse nuevamente.

$('#newFormId input[type=checkbox]').attr('checked',false);

esto hará solo casillas de verificación en el formulario con id newFormId sin marcar.

Answer 15

Como se dijo en la respuesta de Tatu Ulmanen, usar el siguiente guión hará el trabajo

$('input:checkbox').removeAttr('checked');

Pero, como decía el comentario de Blakomen , después de la versión 1.6 es mejor usar jQuery.prop()en su lugar

Tenga en cuenta que en jQuery v1.6 y superior, debería usar .prop ('verificado', falso) en su lugar para una mayor compatibilidad entre navegadores

$('input:checkbox').prop('checked', false);

Tenga cuidado cuando su uso jQuery.each()puede causar problemas de rendimiento. (también, evite jQuery.find()en ese caso. Use cada uno en su lugar)

$('input[type=checkbox]').each(function() 
{ 
    $(this).prop('checked', false); 
});

Answer 16

1

Usé algo así

$(yourSelector).find('input:checkbox').removeAttr('checked');

Andrej Gaspar
fuente

Answer 17

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container check">
<button class="btn">click</button>
  <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car<br>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car<br>
</div>
<script>
$('.btn').click(function() {

$('input[type=checkbox]').each(function() 
{ 
        this.checked = false; 
}); 
})
</script>
</body>
</html>

Answer 18

3

Se desaconsejan las respuestas de solo código. Realmente desea incluir algunas explicaciones.

GhostCat

¿Cómo restablecer todas las casillas de verificación usando jQuery o JS puro?

Respuestas:

Javascript

jQuery