¿Cómo puedo restablecer todas las casillas de verificación en un documento usando jQuery o JS puro?
¿Cómo puedo restablecer todas las casillas de verificación en un documento usando jQuery o JS puro?
Respuestas:
Si te refieres a cómo eliminar el estado 'marcado' de todas las casillas de verificación:
$('input:checkbox').removeAttr('checked');
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().
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?
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;
});
var clist = document.getElementsByTagName("input");
for (var i = 0; i < clist.length; ++i) { clist[i].checked = false; }
$('input:checkbox').each(function() { this.checked = false; });
Para hacer lo contrario, consulte: Seleccionar todas las casillas de verificación por ID / clase
$(":checkbox:checked").each(function () {
this.click();
});
para desmarcar la casilla marcada, cambie su lógica para hacer lo contrario
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.
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);
});
Usé algo así
$(yourSelector).find('input:checkbox').removeAttr('checked');
<!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>