En este artículo, veremos cómo desmarcar todas las casillas excepto primero usando jQuery.
Enfoque : primero, necesitamos obtener todos los elementos de casilla de verificación en una página. Podemos obtener todas las casillas de verificación usando la siguiente llamada jQuery:
$('input[type=checkbox]')
A continuación, podemos usar jQuery cada función para iterar sobre cada casilla de verificación,
each(function (index, checkbox){
if (index != 0) {
checkbox.checked = false;
}
});
En el fragmento anterior, pasamos una función a cada método. Esa función usa dos parámetros, índice y referencia del elemento actual. En esta función, verificamos el índice de cada casilla de verificación. Si el índice es 0, no hacemos nada. Si el índice no es cero, desmarcamos el elemento de casilla de verificación actual.
Ejemplo: a continuación se muestra el código que ilustra el uso del enfoque anterior.
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src=
"https://code.jquery.com/jquery-3.6.0.min.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
$('#btnUncheckAll').click(function () {
$('input[type=checkbox]').each(
function (index, checkbox) {
if (index != 0) {
checkbox.checked = false;
}
});
});
});
</script>
</head>
<body style="text-align:center">
<label for="cb1">CheckBox 1</label>
<input type="checkbox" value="cb1"/>
<br/>
<label for="cb2">CheckBox 2</label>
<input type="checkbox" value="cb2"/>
<br/>
<label for="cb3">CheckBox 3</label>
<input type="checkbox" value="cb3"/>
<br/>
<label for="cb4">CheckBox 4</label>
<input type="checkbox" value="cb4"/>
<br/>
<label for="cb5">CheckBox 5</label>
<input type="checkbox" value="cb5"/>
<br/>
<br/>
<input type="button"
value="Uncheck all checkboxes but first"
id="btnUncheckAll"/>
</body>
</html>
Salida: Vemos la siguiente página web:
Ahora marque todas las casillas de verificación.
Después de hacer clic en el botón: todas las casillas de verificación se desmarcan excepto la primera.
Publicación traducida automáticamente
Artículo escrito por syedfaisalmca y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA