Semantic UI es un marco de código abierto que utiliza CSS y jQuery para crear excelentes interfaces de usuario. Es lo mismo que un bootstrap para usar y tiene diferentes elementos para usar para hacer que su sitio web se vea más increíble.
La interfaz de usuario semántica tiene un montón de componentes para el diseño de la interfaz de usuario. Uno de ellos es el componente Casillas de verificación. Las casillas de verificación se utilizan para mostrar diferentes opciones a los usuarios para elegir. Los usuarios pueden seleccionar entre ellos según su elección. Dependiendo de los requisitos del uso de casillas de verificación, existen diferentes estados de casillas de verificación. Uno de ellos es el estado indeterminado.
Casilla de verificación de IU semántica Estado indeterminado: si desea representar el estado parcialmente marcado (un estado en el que algunas opciones están marcadas), este estado es útil. No se puede implementar en HTML. Solo se puede configurar mediante JavaScript. Representa un estado en el que no está ni completamente marcado ni sin marcar. Es útil en casillas de verificación anidadas. La casilla de verificación superior está marcada si todas las de abajo están marcadas. No está marcada si ninguna de las siguientes opciones está marcada. Si algunas de las siguientes opciones están marcadas, la casilla de verificación del encabezado superior está en un estado indeterminado .
Casilla de verificación de IU semántica Clase de estado indeterminado:
- indeterminado: esta clase se utiliza para especificar que el estado de la casilla de verificación es indeterminado.
Sintaxis:
<div class="ui checkbox">
<input type="checkbox">
<label>...</label>
</div>
Ejemplo: Este ejemplo demuestra el estado indeterminado de la casilla de verificación mediante el script adjunto en HTML.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
<script src=
"https://code.jquery.com/jquery-3.1.1.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body>
<div class="ui container">
<br /><br />
<h2 style="color:green">
GeeksforGeeks
</h2>
<p><b>Semantic UI Checkbox Indeterminate State</b></p>
<hr>
<br />
<strong>Indeterminate Checkbox:</strong>
<br />
<div class="ui relaxed list">
<div class="item">
<div class="ui master checkbox">
<input type="checkbox" name="fruits">
<label>Head Checkbox</label>
</div>
<div class="list">
<div class="item">
<div class="ui child checkbox">
<input type="checkbox"
name="apple">
<label>Child 1</label>
</div>
</div>
<div class="item">
<div class="ui child checkbox">
<input type="checkbox"
name="orange">
<label>Child 2</label>
</div>
</div>
<div class="item">
<div class="ui child checkbox">
<input type="checkbox"
name="pear">
<label>Child 3</label>
</div>
</div>
</div>
</div>
</div>
<script>
$('.list .master.checkbox')
.checkbox({
// Tick all children if
// the head checkbox is ticked
onChecked: function () {
var $child =$(this)
.closest('.checkbox')
.siblings('.list')
.find('.checkbox');
$child.checkbox('check');
},
// Untick all children if
// the head checkbox is unticked
onUnchecked: function () {
var $child = $(this)
.closest('.checkbox')
.siblings('.list')
.find('.checkbox');
$child.checkbox('uncheck');
}
});
$('.list .child.checkbox')
.checkbox({
fireOnInit: true,
// Change the head checkbox state
// on each child's onChange call
onChange: function () {
var list = $(this).closest('.list'),
parentCheckbox = list
.closest('.item')
.children('.checkbox'),
checkbox = list.find('.checkbox'),
allticked = true,
allunticked = true;
checkbox.each(function () {
if ($(this).checkbox('is checked')) {
allunticked = false;
}
else {
allticked = false;
}
});
// Setting the head checkbox properties
if (allticked) {
parentCheckbox
.checkbox('set checked' );
}
else if (allunticked) {
parentCheckbox
.checkbox('set unchecked');
}
else {
parentCheckbox
.checkbox('set indeterminate');
}
}
});
</script>
</body>
</html>
Salida: Las casillas de verificación por defecto se cargan como sin marcar. El usuario puede marcar la casilla de verificación principal marcando todas las siguientes. Sin embargo, si el usuario hace clic en algunos de ellos, se encuentra en un estado indeterminado. Si el usuario hace clic en la casilla principal, todas las demás casillas secundarias se marcan y viceversa.
Estado indeterminado
Referencia: https://semantic-ui.com/modules/checkbox.html#indeterminate
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA