jQuery Mobile - Grupo vertical de casilla de verificación

Descripción

La casilla de verificación múltiple se agrupa configurando el data-role = "controlgroup"atributo en el conjunto de campos . Automáticamente, el marco establecerá las esquinas redondeadas en la esquina inferior y superior, y eliminará todos los márgenes. De forma predeterminada, la casilla de verificación está configurada verticalmente.

Ejemplo

El siguiente ejemplo demuestra el uso de la casilla de verificación de grupo vertical en jQuery Mobile.

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   <body>
      <h2>Vertical Group Example</h2>
      <form>
         <fieldset data-role = "controlgroup">
            <input type = "checkbox" id = "checkbox 1" />
            <label for = "checkbox 1">Checkbox 1</label>

            <input type = "checkbox" id = "checkbox 2" />
            <label for = "checkbox 2">Checkbox 2</label>

            <input type = "checkbox" id = "checkbox 3" />
            <label for = "checkbox 3">Checkbox 3</label>
         </fieldset>
      </form>
   </body>
</html>

Salida

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

Guarde el código html anterior como vertical_group.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/vertical_group.html y se mostrará el siguiente resultado.

↰ Previous page