Widget de casilla de verificación EasyUI jQuery

En este artículo, aprenderemos cómo diseñar una casilla de verificación usando jQuery EasyUI. El widget de casilla de verificación se utiliza para seleccionar múltiples opciones. Cada opción se puede habilitar haciendo clic en las casillas. EasyUI es un marco HTML5 para usar componentes de interfaz de usuario basados en tecnologías jQuery, React, Angular y Vue. Ayuda a crear funciones para aplicaciones móviles y web interactivas, lo que ahorra mucho tiempo a los desarrolladores.

Descargas para EasyUI para jQuery:

https://www.jeasyui.com/download/index.php

Sintaxis:

<input class="easyui-checkbox">

Propiedades:

ancho: se utiliza para establecer el ancho de la casilla de verificación.
altura: se utiliza para establecer la altura de la casilla de verificación.
valor: Se utiliza para establecer el valor predeterminado de la casilla de verificación.
marcada: Se utiliza para que la casilla de verificación esté marcada.
disabled: Se utiliza para deshabilitar la casilla de verificación.
etiqueta: el límite de la etiqueta de la casilla de verificación.
labelWidth: Se utiliza para establecer el ancho de la etiqueta.
labelPosition: se utiliza para establecer la posición de la etiqueta.
labelAlign: Se utiliza para establecer la alineación de la etiqueta.

Eventos:

ires cuando se cambia el valor marcado.

Métodos:

options : Devuelve el objeto de opciones.
setValue : Establece el valor de la casilla de verificación.
disabled : Deshabilita el componente checkbox.
enable : Habilita el componente checkbox.
check : Marca la casilla de verificación.
uncheck : Desmarca la casilla de verificación.
clear : Borra el valor.
reset : Resetea el valor.

Vínculos de CDN: Primero, agregue los scripts jQuery Easy UI necesarios para su proyecto.

<script type=”text/javascript” src=”jquery.min.js”> </script>
<!–Bibliotecas jQuery de EasyUI –>
<script type=”text/javascript” src=”jquery.easyui.min. js”> </script>
<!–Biblioteca jQuery de EasyUI Mobile –>
<script type=”text/javascript” src=”jquery.easyui.mobile.js”> </script>

Ejemplo:

HTML

<html>
<head> 
    <!-- EasyUI specific stylesheets-->
    <link rel="stylesheet" type="text/css"
          href="themes/metro/easyui.css"> 
  
    <link rel="stylesheet" type="text/css"
          href="themes/mobile.css"> 
  
    <link rel="stylesheet" type="text/css"
          href="themes/icon.css"> 
  
    <!--jQuery library -->
    <script type="text/javascript" 
            src="jquery.min.js"> 
    </script> 
  
    <!--jQuery libraries of EasyUI -->
    <script type="text/javascript"
            src="jquery.easyui.min.js"> 
    </script> 
      
    <!--jQuery library of EasyUI Mobile -->
    <script type="text/javascript"
            src="jquery.easyui.mobile.js"> 
    </script>
</head> 
<body>
    <h1>GeeksforGeeks</h1>
    <h3>EasyUI jQuery checkbox widget</h3>
    
 <form id="gfg">
    <div style="margin-bottom:10px">
        <input class="easyui-checkbox" 
               name="language" 
               value="HTML" 
               label="1st:">
    </div>
    <div style="margin-bottom:10px">
        <input class="easyui-checkbox" 
               name="language" 
               value="JavaScript" 
               label="2nd:">
    </div>
    <div style="margin-bottom:10px">
        <input class="easyui-checkbox" 
               name="language"
               value="jQuery" 
               label="3rd:">
    </div>
</form>
</body>
</html>

Producción:

Referencia: https://www.jeasyui.com/documentation/checkbox.php

Publicación traducida automáticamente

Artículo escrito por taran910 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

Deja una respuesta Cancelar la respuesta