El widget checkboxradio se puede usar para recibir información del usuario. La principal diferencia entre el botón de casilla de verificación tradicional y el de jQuery UI es la facilidad con la que puede estilizar el botón. Este widget permite evitar esa limitación colocando la etiqueta asociada encima de la entrada oculta y emulando la casilla de verificación o el elemento de radio usando un icono (opcional).
Sintaxis:
$( "$selector" ).checkboxradio({
});
Atributos:
- destroy: se usa para eliminar la funcionalidad checkboxradio de jQuery UI y cambiarla a casilla de verificación estándar sin ningún estilo.
- deshabilitar: deshabilita los botones de radio de la casilla de verificación.
- habilitar: Habilita el botón de opción casilla de verificación si se ha deshabilitado previamente.
- instancia: Devuelve el objeto de última instancia de la casilla de verificación si no hay ningún objeto seleccionado, devuelve undefined .
- actualizar: se utiliza para actualizar la apariencia del widget, útil después de cambiar y aplicar diferentes temas.
- widget: Devuelve el checkboxradio completo como un objeto de widget jQuery.
Ejemplo 1: Vamos a crear una radio de casilla de verificación simple con un tema básico. Aquí está el código para esto.
<!DOCTYPE html>
<html>
<head>
<link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/cupertino/jquery-ui.css'
rel='stylesheet'>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<br>
<h3>Radio Button</h3>
<label for="radio-1">Tennis</label>
<input type="radio"
name="radio-1"
id="radio-1"
class='r2'>
<br>
<label for="radio-2">Badminton</label>
<input type="radio"
name="radio-1"
id="radio-2"
class='r2'>
<br>
<label for="radio-3">Squash</label>
<input type="radio"
name="radio-1"
id="radio-3"
class='r2'>
<br>
<br>
<br>
<h3>Checkbox</h3>
<label for="checkbox-1">Cricket</label>
<input type="checkbox"
name="checkbox-1"
id="checkbox-1"
class='c2'>
<br>
<label for="checkbox-2">Football</label>
<input type="checkbox"
name="checkbox-2"
id="checkbox-2"
class='c2'>
<script>
$(document).ready(function() {
$(".r2, .c2").checkboxradio({});
});
</script>
</center>
</body>
</html>
Producción:
Aplicar un tema: el tema se puede cambiar cambiando el archivo CSS. Aquí, se han utilizado algunos archivos CSS predefinidos en jQuery UI. El cambio en el archivo CSS que se llama dentro de la etiqueta principal.
Ejemplo 2:
<!DOCTYPE html>
<html>
<head>
<link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/cupertino/jquery-ui.css'
rel='stylesheet'>
<link rel='stylesheet'
href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/le-frog/jquery-ui.css'>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<h3>Radio Button</h3>
<label for="radio-1">Tennis</label>
<input type="radio"
name="radio-1"
id="radio-1"
class='r2'>
<br>
<label for="radio-2">Badminton</label>
<input type="radio"
name="radio-1"
id="radio-2"
class='r2'>
<br>
<label for="radio-3">Squash</label>
<input type="radio"
name="radio-1"
id="radio-3"
class='r2'>
<br>
<h3>Checkbox</h3>
<label for="checkbox-1">Cricket</label>
<input type="checkbox"
name="checkbox-1"
id="checkbox-1"
class='c2'>
<br>
<label for="checkbox-2">Football</label>
<input type="checkbox"
name="checkbox-2"
id="checkbox-2"
class='c2'>
<script>
$(document).ready(function() {
$(".r2, .c2").checkboxradio({});
});
</script>
</center>
</body>
</html>
Nota: En el ejemplo anterior , r2 y c2 son las identificaciones de la etiqueta div. Para aplicarlo a una clase, agregue «$» antes del nombre de la clase.
Ejemplo: “$mi_clase”
Aquí hemos utilizado el tema “le-frog” . Como se ha especificado en esta línea.
<enlace rel=’hoja de estilo’ href=’https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/le-frog/jquery-ui.css’>
Producción:
Publicación traducida automáticamente
Artículo escrito por mayeshmohapatra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA