Framework7 - Grupo de casillas de verificación

Descripción

El grupo de casillas de verificación permite al usuario seleccionar una lista de opciones especificadas marcándolas. El contenido del elemento debe ser un elemento de etiqueta con la clase label-checkbox y el icono de la casilla de verificación debe estar en item-media .

Ejemplo

El siguiente ejemplo demuestra el uso del grupo de casillas de verificación en Framework7:

<!DOCTYPE html>
<html>

   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, 
         maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
      <meta name = "apple-mobile-web-app-capable" content = "yes" />
      <meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
      <title>Checkboxes group</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
   </head>

   <body>
      <div class = "views">
         <div class = "view view-main">
            <div class = "pages">
               <div data-page = "home" class = "page navbar-fixed">
                  
                  <div class = "navbar">
                     <div class = "navbar-inner">
                        <div class = "left"> </div>
                        <div class = "center">Checkboxes Group</div>
                        <div class = "right"> </div>
                     </div>
                  </div>
                  
                  <div class = "page-content">
                     <div class = "content-block-title">Checkboxes group</div>
                     <div class = "list-block">
                        <ul>
                           <li>
                              <label class = "label-checkbox item-content">
                                 <input type = "checkbox" name = "ks-checkbox" value = "Pants" checked>
                                 <div class = "item-media"><i class = "icon icon-form-checkbox"></i></div>
                                 <div class = "item-inner">
                                    <div class = "item-title">Pants</div>
                                 </div>
                              </label>
                           </li>
                           
                           <li>
                              <label class = "label-checkbox item-content">
                                 <input type = "checkbox" name = "ks-checkbox" value = "Shirts">
                                 <div class = "item-media"><i class = "icon icon-form-checkbox"></i></div>
                                 <div class = "item-inner">
                                    <div class = "item-title">Shirts</div>
                                 </div>
                              </label>
                           </li>
                           
                           <li>
                              <label class = "label-checkbox item-content">
                                 <input type = "checkbox" name = "ks-checkbox" value = "Sarees">
                                 <div class = "item-media"><i class = "icon icon-form-checkbox"></i></div>
                                 <div class = "item-inner">
                                    <div class = "item-title">Sarees</div>
                                 </div>
                              </label>
                           </li>
                           
                           <li>
                              <label class = "label-checkbox item-content">
                                 <input type = "checkbox" name = "ks-checkbox" value = "Jeans">
                                 <div class = "item-media"><i class = "icon icon-form-checkbox"></i></div>
                                 <div class = "item-inner">
                                    <div class = "item-title">Jeans</div>
                                 </div>
                              </label>
                           </li>
                        </ul>
                     </div>
                  </div>
                  
               </div>
            </div>
         </div>
      </div>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
         
      <script>
         var myApp = new Framework7();
      </script>
   </body>

</html>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código dado anteriormente:

Guarde el código HTML proporcionado anteriormente como forms_checkboxes.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/forms_checkboxes.html y la salida se muestra como se muestra a continuación.
El diseño del formulario muestra el grupo de casillas de verificación, que le permite seleccionar las opciones marcándolas donde puede seleccionar una o más opciones.

↰ Previous page