jQuery Mobile - Widget de radio básico

Descripción

Los botones de radio se pueden crear usando el <input>elemento con un atributo type = "radio" y una etiqueta correspondiente. Establecer el elemento de entrada confor atributo para que coincida con el ID de la etiqueta de modo que estén asociados semánticamente.

Ejemplo

El siguiente ejemplo demuestra el uso del botón de opción básico 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>
      <form>
         <h2>Basic Radio Example</h2>
         <fieldset data-role = "controlgroup">
            <input type = "radio" id = "radio1" name = "radio-choice-0" />
            <label for = "radio1">Radio 1</label>

            <input type = "radio" id = "radio2" name = "radio-choice-0" />
            <label for = "radio2">Radio 2</label>

            <input type = "radio" id = "radio3" name = "radio-choice-0" />
            <label for = "radio3">Radio 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 radio_basic.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/radio_basic.html y se mostrará el siguiente resultado.

↰ Previous page